Avoiding selector bloat from @extend in SASS - Browser Rendering Trace

Render Flow - Avoiding selector bloat from @extend

Parse SCSS file

↓

Identify @extend usage

↓

Find selectors to extend

↓

Merge selectors in CSS output

↓

Generate combined selector rules

↓

Output final CSS

↓

Browser renders combined selectors

The SCSS compiler reads the file, finds @extend directives, merges selectors that share styles, and outputs combined CSS selectors. The browser then renders these combined selectors as one style rule.

Render Steps - 3 Steps

Code Added:.button { padding: 1rem; border-radius: 0.5rem; font-weight: bold; }

Before

[ ]

(No styled buttons, plain text blocks)

→

After

[button]
[__________]
Padding adds space inside button
Rounded corners visible
Text bold

Adding .button styles gives all buttons padding, rounded corners, and bold text.

🔧 Browser Action:Creates CSS rule for .button selector; triggers layout and paint

Code Sample

Two buttons share common styles from .button using @extend, producing combined selectors in CSS to avoid repeating styles.

SASS

<div class="button primary">Click me</div>
<div class="button secondary">Cancel</div>

SASS

.button {
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: bold;
}
.primary {
  @extend .button;
  background-color: blue;
  color: white;
}
.secondary {
  @extend .button;
  background-color: gray;
  color: black;
}

Render Quiz - 3 Questions

After applying step 2, what does the CSS selector list for the shared styles look like?

A .button .primary

B .button, .primary

C .primary

D .button.primary

Common Confusions - 2 Topics

Why do I see very long combined selectors in the compiled CSS?

When multiple selectors extend the same base, Sass merges them all into one combined selector list. This can create long selectors but avoids repeating styles.

💡 Look at render_step 2 and 3: @extend merges selectors to share styles, causing combined selectors.

Why doesn't @extend work if I try to extend a selector inside a media query?

Extending selectors inside media queries only merges selectors within that media query scope. It won't merge with selectors outside, so styles may duplicate.

💡 Keep @extend usage consistent in the same scope to avoid selector bloat.

Property Reference

Property	Value Applied	Effect on Selector	Visual Effect	Common Use
@extend	Selector name	Merges selectors in CSS output	Avoids repeating styles, reduces CSS size	Share styles without duplication
padding	1rem	N/A	Adds space inside element edges	Button spacing
background-color	color value	N/A	Changes background color	Button backgrounds
color	color value	N/A	Changes text color	Button text color
border-radius	0.5rem	N/A	Rounds corners visually	Button shape
font-weight	bold	N/A	Makes text bold	Emphasize text

Concept Snapshot

@extend merges selectors sharing styles to avoid repeating CSS. It creates combined selector lists in output CSS. Common styles go in base selector; others extend it. Avoids bloated CSS but can create long selector lists. Use consistently in same scope to prevent duplication.