Extend limitations and gotchas in SASS - Performance & Optimization

Performance: Extend limitations and gotchas

MEDIUM IMPACT

Using @extend in Sass affects CSS generation size and browser rendering performance by increasing selector complexity and causing style recalculations.

Reusing styles across multiple selectors

SASS

@mixin button-styles { padding: 1rem; background: blue; }
.button { @include button-styles; }
.card { @include button-styles; color: white; }

Uses mixins to copy styles without creating complex selectors, keeping CSS simpler and smaller.

📈 Performance GainSaves 5-10kb in CSS size; faster style matching and rendering

Reusing styles across multiple selectors

SASS

.button { padding: 1rem; background: blue; }
.card { @extend .button; color: white; }

Generates long combined selectors that increase CSS file size and cause slower style matching in browsers.

📉 Performance CostAdds 5-10kb to CSS bundle; triggers slower style recalculation during page load

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
@extend with many selectors	No extra DOM nodes	Triggers multiple reflows if styles change	High paint cost due to complex styles	[X] Bad
Mixin for style reuse	No extra DOM nodes	Single reflow on style change	Lower paint cost with simpler styles	[OK] Good

Rendering Pipeline

When @extend creates combined selectors, the browser must match more complex selectors during Style Calculation, increasing CPU work and delaying rendering.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to complex selector matching

Core Web Vital Affected

LCP

Using @extend in Sass affects CSS generation size and browser rendering performance by increasing selector complexity and causing style recalculations.

Optimization Tips

1Avoid overusing @extend to prevent large, complex CSS selectors.

2Prefer mixins or utility classes for style reuse to keep CSS simpler.

3Monitor CSS file size and style calculation time to catch performance issues.

Performance Quiz - 3 Questions

What is a main performance drawback of using @extend in Sass?

A It blocks JavaScript execution during rendering.

B It increases the number of DOM elements on the page.

C It creates complex CSS selectors that slow down browser style matching.

D It reduces CSS file size too much.

DevTools: Performance

How to check: Record a performance profile while loading the page; look for long Style Calculation times and large CSS files in the Network panel.

What to look for: High Style Calculation duration and large CSS file size indicate heavy @extend usage causing performance issues.