Avoiding selector bloat from @extend in SASS - Performance & Optimization

Performance: Avoiding selector bloat from @extend

MEDIUM IMPACT

This affects CSS file size and browser rendering speed by controlling how many selectors are generated and matched.

Reusing styles without creating large, complex selectors

SASS

@mixin button-style {
  padding: 1rem;
  border-radius: 0.5rem;
}

.button {
  @include button-style;
}
.alert {
  @include button-style;
}
.card {
  @include button-style;
}

Using mixins duplicates styles but keeps selectors simple and separate, reducing selector bloat and improving browser style matching speed.

📈 Performance GainReduces CSS size growth and improves style recalculation speed by avoiding large combined selectors.

Reusing styles without creating large, complex selectors

SASS

@extend .button;
@extend .alert;
@extend .card;

Using multiple @extend directives on different selectors causes Sass to combine selectors, creating very long selector lists that increase CSS size and slow browser matching.

📉 Performance CostIncreases CSS file size by 30-50% and triggers slower style recalculation in browsers.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple @extend on different selectors	No direct DOM changes	0	High due to complex selector matching	[X] Bad
Using mixins for style reuse	No direct DOM changes	0	Low due to simple selectors	[OK] Good

Rendering Pipeline

Large combined selectors from @extend increase the complexity of the Style Calculation stage, making the browser spend more time matching elements to styles.

→Style Calculation

⚠️ BottleneckStyle Calculation due to complex selector matching

Core Web Vital Affected

LCP

This affects CSS file size and browser rendering speed by controlling how many selectors are generated and matched.

Optimization Tips

1Avoid using @extend on many different selectors to prevent large combined selectors.

2Prefer mixins or utility classes to reuse styles without selector bloat.

3Keep CSS selectors simple to speed up browser style matching and improve LCP.

Performance Quiz - 3 Questions

What is a main performance problem caused by excessive use of @extend in Sass?

A It blocks JavaScript execution during page load.

B It creates very long combined selectors that slow down browser style matching.

C It increases the number of DOM nodes on the page.

D It causes images to load slower.

DevTools: Performance

How to check: Record a performance profile while loading the page and look at the 'Style Recalculation' time in the summary.

What to look for: Long style recalculation times indicate complex selectors; shorter times mean simpler CSS selectors and better performance.