@extend directive in SASS - Performance & Optimization

Performance: @extend directive

MEDIUM IMPACT

This affects CSS bundle size and browser rendering performance by duplicating or merging selectors.

Reusing styles across multiple selectors

SASS

.btn-primary, .btn-secondary { color: blue; padding: 1rem; }

Combines selectors to share styles, reducing CSS size and improving load speed.

📈 Performance GainSaves CSS bytes, improving LCP by reducing CSS download and parse time.

Reusing styles across multiple selectors

SASS

.btn-primary { color: blue; padding: 1rem; }
.btn-secondary { color: blue; padding: 1rem; }

Repeats same styles in multiple selectors, increasing CSS size and download time.

📉 Performance CostAdds extra CSS bytes, increasing LCP by a few milliseconds on slow networks.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated styles without @extend	No extra DOM operations	0	Low	[X] Bad
@extend with complex selectors	No extra DOM operations	0	Medium due to complex style calculation	[!] OK
Manual selector grouping	No extra DOM operations	0	Low	[OK] Good

Rendering Pipeline

The @extend directive affects CSS generation, which impacts style calculation and layout stages in the browser rendering pipeline.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to complex merged selectors

Core Web Vital Affected

LCP

This affects CSS bundle size and browser rendering performance by duplicating or merging selectors.

Optimization Tips

1Avoid using @extend with complex selectors to prevent slow style calculation.

2Prefer manual selector grouping for shared styles to keep CSS simple.

3Monitor style recalculation times in DevTools to detect costly CSS selectors.

Performance Quiz - 3 Questions

What is a main performance risk of using @extend with complex selectors?

A It causes extra DOM nodes to be created.

B It increases CSS file size by duplicating all styles.

C It creates complex merged selectors that slow style calculation.

D It blocks JavaScript execution during page load.

DevTools: Performance

How to check: Record a performance profile while loading the page and inspect the 'Style Recalculation' events.

What to look for: Long style recalculation times or many complex selector matches indicate costly CSS selectors from @extend.