Avoiding selector bloat from @extend in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What happens when you use @extend with multiple selectors?

Consider the Sass code below using @extend with multiple selectors. What is the main effect on the compiled CSS selectors?

SASS

@mixin button-style {
  background: blue;
  color: white;
}

.btn-primary {
  @extend .btn, .btn-large;
  @include button-style;
}

A The compiled CSS will only include .btn-primary styles without combining selectors, so no selector bloat occurs.

B The compiled CSS will duplicate the styles of .btn and .btn-large inside .btn-primary without combining selectors.

C The compiled CSS will combine all selectors from .btn and .btn-large with .btn-primary, increasing selector length and causing selector bloat.

D The compiled CSS will ignore the @extend and only apply the mixin styles to .btn-primary.

💡 Hint

Think about how @extend merges selectors in the output CSS.

Using @extend with multiple selectors merges all selectors into one rule in the compiled CSS. This can cause long combined selectors, which is called selector bloat.

📝 Syntax

intermediate

Which Sass code avoids selector bloat when sharing styles?

You want to share styles between .btn and .btn-primary without causing selector bloat. Which option uses Sass features correctly to avoid bloat?

A

%btn-base {
  background: green;
  color: white;
}
.btn {
  @extend %btn-base;
}
.btn-primary {
  @extend %btn-base;
}

B

.btn-primary {
  @extend .btn;
  background: green;
}

C

.btn {
  @extend .btn-primary;
  background: green;
}

D

.btn, .btn-primary {
  background: green;
  color: white;
}

💡 Hint

Use placeholder selectors to share styles without merging selectors.

Using a placeholder selector (starting with %) and extending it avoids selector bloat because placeholders do not output selectors themselves, only styles.

❓ rendering

advanced

What is the compiled CSS output from this Sass code?

Given the Sass code below, what is the exact compiled CSS output?

SASS

%alert-base {
  padding: 1rem;
  border-radius: 0.5rem;
}

.alert {
  @extend %alert-base;
  background: yellow;
}

.alert-error {
  @extend %alert-base;
  background: red;
}

A

.alert {
  background: yellow;
}
.alert-error {
  background: red;
}

B

.alert, .alert-error {
  padding: 1rem;
  border-radius: 0.5rem;
}
.alert {
  background: yellow;
}
.alert-error {
  background: red;
}

C

.alert {
  padding: 1rem;
  border-radius: 0.5rem;
  background: yellow;
}
.alert-error {
  padding: 1rem;
  border-radius: 0.5rem;
  background: red;
}

D

%alert-base {
  padding: 1rem;
  border-radius: 0.5rem;
}
.alert {
  background: yellow;
}
.alert-error {
  background: red;
}

💡 Hint

Remember that placeholder selectors do not output themselves but their styles are merged into selectors that extend them.

The placeholder %alert-base does not output CSS by itself. Both .alert and .alert-error extend it, so their selectors are combined with the shared styles. Then each adds its own background color.

❓ selector

advanced

Which selector causes the most selector bloat when extended?

Given these selectors, which one will cause the largest selector bloat when used with @extend?

A %shared-style

B .btn-primary

C .nav, .nav-item, .nav-link

D .header, .footer, .sidebar, .content

💡 Hint

Selector bloat grows with the number of selectors combined by @extend.

Extending a selector with many comma-separated selectors merges all those selectors with the extending selector, causing large combined selectors and bloat.

❓ accessibility

expert

How can you use Sass @extend without harming accessibility related selectors?

You have accessibility-focused selectors like .sr-only for screen readers. What is the best practice when using @extend with these selectors to avoid unintended style merging that could harm accessibility?

A Avoid extending accessibility selectors; instead, use mixins or separate classes to keep styles isolated.

B Use @extend freely on accessibility selectors since they only affect screen readers and won't cause issues.

C Combine accessibility selectors with many others in @extend to reduce CSS size, even if styles merge.

D Duplicate accessibility styles manually in each selector instead of using @extend or mixins.

💡 Hint

Think about how merging selectors might affect screen reader only styles.

Extending accessibility selectors like .sr-only can merge them with other selectors, causing styles to apply where not intended, harming accessibility. Using mixins or separate classes keeps styles isolated and safe.

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