Avoiding selector bloat from @extend in SASS - Mini Project: Build & Apply

Avoiding selector bloat from @extend in Sass

📖 Scenario: You are creating styles for a simple website with buttons. You want to reuse some button styles without making your CSS selectors too long or repeated.

🎯 Goal: Build Sass code that uses @extend carefully to avoid creating very long combined selectors in the final CSS.

📋 What You'll Learn

Create a base button style class

Create a secondary button style class that extends the base button

Add a special button style that extends the secondary button

Use placeholder selectors to avoid selector bloat

💡 Why This Matters

🌍 Real World

Web developers often reuse button styles across a website. Using @extend with placeholders helps keep CSS clean and efficient.

💼 Career

Understanding how to avoid selector bloat with @extend is important for writing maintainable Sass in professional front-end development.

1

Create base button style

Create a placeholder selector called %button-base with these styles: padding: 1rem;, border-radius: 0.5rem;, and font-weight: bold;

SASS

# Your code here

Hint

Use %button-base as a placeholder selector with @extend later.

2

Create secondary button style extending base

Create a class selector called .btn-secondary that @extends %button-base and adds background-color: lightgray; and color: black;

SASS

%button-base {
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

# Your code here

Hint

Use @extend %button-base; inside .btn-secondary.

3

Create special button style extending secondary

Create a class selector called .btn-special that @extends .btn-secondary and adds border: 2px solid blue;

SASS

%button-base {
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

.btn-secondary {
  @extend %button-base;
  background-color: lightgray;
  color: black;
}

# Your code here

Hint

Extend .btn-secondary inside .btn-special to reuse styles.

4

Add a button class that uses the base placeholder

Create a class selector called .btn that @extends %button-base and adds background-color: blue; and color: white;

SASS

%button-base {
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

.btn-secondary {
  @extend %button-base;
  background-color: lightgray;
  color: black;
}

.btn-special {
  @extend .btn-secondary;
  border: 2px solid blue;
}

# Your code here

Hint

Use @extend %button-base; inside .btn to reuse base styles without selector bloat.

Practice

1. What is the main problem with using @extend in Sass without placeholders?

easy

A. It creates long combined selectors causing selector bloat.

B. It duplicates all CSS properties in the output.

C. It prevents styles from being reused.

D. It only works inside mixins.

Solution

1. Step 1: Understand what @extend does

   @extend shares styles by combining selectors in the output CSS.

2. Step 2: Identify the problem with combining selectors

   When many selectors are combined, the CSS file grows longer and harder to maintain, called selector bloat.

3. Final Answer:

   It creates long combined selectors causing selector bloat. -> Option A

4. Quick Check:

   @extend causes selector bloat = A [OK]

Hint: Remember: @extend merges selectors, causing long combined lists [OK]

Common Mistakes:

• Thinking @extend duplicates properties instead of combining selectors
• Confusing @extend with mixins
• Believing @extend only works inside mixins

2. Which of the following is the correct way to define a placeholder selector in Sass?

easy

A. %button { color: blue; }

B. .button { color: blue; }

C. #button { color: blue; }

D. &button { color: blue; }

Solution

1. Step 1: Recall placeholder selector syntax

   Placeholder selectors start with a percent sign (%) in Sass.

2. Step 2: Match the syntax to the options

   Only %button { color: blue; } uses %button, which is the correct placeholder syntax.

3. Final Answer:

   %button { color: blue; } -> Option A

4. Quick Check:

   Placeholder selector syntax = %name [OK]

Hint: Placeholders start with % in Sass [OK]

Common Mistakes:

• Using class selector syntax (.) instead of %
• Using ID selector (#) for placeholders
• Confusing & with placeholder syntax

3. Given the Sass code:

%btn { color: red; }
.primary { @extend %btn; }
.secondary { @extend %btn; }

What will the compiled CSS look like?

medium

A. .primary, .secondary, %btn { color: red; }

B. .primary, .secondary { color: red; }

C. %btn { color: red; } .primary, .secondary { color: red; }

D. .primary { color: red; } .secondary { color: red; }

Solution

1. Step 1: Understand placeholder selectors output

   Placeholder selectors do not appear in the compiled CSS; only selectors that extend them appear combined.

2. Step 2: Combine selectors that extend the placeholder

   .primary and .secondary both extend %btn, so they are combined into one selector with the shared styles.

3. Final Answer:

   .primary, .secondary { color: red; } -> Option B

4. Quick Check:

   Placeholder selectors disappear, extended selectors combine [OK]

Hint: Placeholder selectors don't output; extended selectors combine [OK]

Common Mistakes:

• Expecting %btn to appear in CSS
• Thinking styles duplicate for each selector
• Confusing combined selectors with separate blocks

4. What is wrong with this Sass code that uses @extend without placeholders?

.btn { color: green; }
.primary { @extend .btn; }
.secondary { @extend .btn; }

medium

A. It duplicates the .btn styles instead of combining selectors.

B. It causes a syntax error because @extend needs placeholders.

C. It causes selector bloat by combining all selectors including .btn.

D. It does not apply styles to .primary and .secondary.

Solution

1. Step 1: Understand @extend with normal selectors

   Extending a normal class merges selectors including the original class, creating longer combined selectors.

2. Step 2: Identify the problem caused

   This merging causes selector bloat because the original selector (.btn) stays in output and combines with all extending selectors.

3. Final Answer:

   It causes selector bloat by combining all selectors including .btn. -> Option C

4. Quick Check:

   @extend without placeholders causes selector bloat [OK]

Hint: Extending normal selectors merges all selectors, causing bloat [OK]

Common Mistakes:

• Thinking @extend requires placeholders
• Expecting duplicated styles instead of combined selectors
• Believing styles won't apply to extending selectors

5. You want to share button styles in Sass but avoid selector bloat from @extend. Which approach is best?

hard

A. Use a placeholder selector with @extend in button classes.

B. Use @extend directly on a normal class selector.

C. Copy and paste the styles into each button class.

D. Use a mixin to include styles in each button class.

Solution

1. Step 1: Understand selector bloat causes

   @extend merges selectors, which can cause long combined selectors and bloat.

2. Step 2: Compare placeholders and mixins

   Placeholders reduce bloat but still combine selectors. Mixins copy styles without merging selectors, avoiding bloat.

3. Step 3: Choose the best approach to avoid bloat

   Using mixins copies styles directly, preventing selector bloat while sharing styles.

4. Final Answer:

   Use a mixin to include styles in each button class. -> Option D

5. Quick Check:

   Mixins avoid selector bloat better than @extend [OK]

Hint: Mixins copy styles, avoiding selector bloat from @extend [OK]

Common Mistakes:

• Thinking placeholders fully prevent bloat
• Using @extend on normal selectors causing bloat
• Copy-pasting styles manually instead of using mixins