Avoiding selector bloat from @extend in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is selector bloat when using @extend in Sass?

Selector bloat happens when @extend causes many CSS selectors to combine, making the final CSS larger and harder to read.

intermediate

How can you avoid selector bloat when using @extend?

Use @extend only with placeholder selectors (starting with %) and avoid extending complex selectors to keep CSS clean.

beginner

What is a placeholder selector in Sass?

A placeholder selector starts with % and is used only for @extend. It does not output CSS on its own, helping avoid selector bloat.

intermediate

Why should you avoid extending selectors with many classes or elements?

Because it creates long combined selectors in the output CSS, increasing file size and reducing readability.

intermediate

What is a good alternative to @extend to avoid selector bloat?

Using mixins or utility classes can help reuse styles without creating complex combined selectors.

What does @extend do in Sass?

A Adds JavaScript to CSS

B Copies styles from one selector to another

C Deletes unused CSS selectors

D Creates a new CSS file

@extend copies styles from one selector to another by combining selectors in the output CSS.

Which selector type helps avoid selector bloat when using @extend?

A Element selectors (e.g., <code>div</code>)

B ID selectors (e.g., <code>#header</code>)

C Class selectors (e.g., <code>.button</code>)

D Placeholder selectors (e.g., <code>%placeholder</code>)

Placeholder selectors start with % and only output CSS when extended, reducing selector bloat.

What is a downside of extending complex selectors with many classes?

A It creates long combined selectors causing selector bloat

B It reduces CSS file size

C It makes CSS invalid

D It disables styles

Extending complex selectors creates long combined selectors, increasing CSS size and complexity.

Which Sass feature can be used instead of @extend to avoid selector bloat?

A Variables

B Nesting

C Mixins

D Functions

Mixins allow reusing styles without combining selectors, avoiding selector bloat.

What happens if you extend a placeholder selector?

A The styles are copied and selectors combined only where extended

B The placeholder selector outputs CSS on its own

C No CSS is generated

D An error occurs

Extending a placeholder copies its styles and combines selectors only where extended, keeping CSS clean.

Explain what selector bloat is and how using placeholder selectors with @extend helps avoid it.

Think about how CSS selectors combine and how placeholders don't output CSS alone.

Describe alternatives to @extend that help keep your CSS clean and avoid selector bloat.

Consider ways to reuse styles without combining selectors.