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.