Why extending reduces duplication in SASS - Performance Evidence

Performance: Why extending reduces duplication

MEDIUM IMPACT

This affects CSS file size and browser rendering speed by reducing repeated styles and selectors.

Applying the same styles to multiple selectors without repeating code

SASS

.button { color: blue; padding: 1rem; border-radius: 0.5rem; }
.card-button { @extend .button; }

Extending shares the same CSS rules, avoiding duplication and reducing file size.

📈 Performance GainSaves kilobytes in CSS size, improving LCP by reducing CSS download and parse time.

Applying the same styles to multiple selectors without repeating code

SASS

.button { color: blue; padding: 1rem; border-radius: 0.5rem; }
.card-button { color: blue; padding: 1rem; border-radius: 0.5rem; }

Repeating the same styles for multiple selectors increases CSS file size and parsing time.

📉 Performance CostAdds extra kilobytes to CSS bundle, increasing LCP by 50-100ms on slow networks.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated styles without @extend	No extra DOM nodes	No extra reflows	Higher paint cost due to larger CSS	[X] Bad
Using @extend to share styles	No extra DOM nodes	No extra reflows	Lower paint cost due to smaller CSS	[OK] Good

Rendering Pipeline

When Sass @extend is used, the compiler merges selectors sharing styles, producing smaller CSS. This reduces the amount of CSS the browser must download and parse, speeding up style calculation and layout.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to large CSS files with duplicated rules

Core Web Vital Affected

LCP

This affects CSS file size and browser rendering speed by reducing repeated styles and selectors.

Optimization Tips

1Use @extend to share styles and avoid repeating CSS rules.

2Smaller CSS files load and parse faster, improving page load speed.

3Reducing CSS duplication helps improve Largest Contentful Paint (LCP).

Performance Quiz - 3 Questions

How does using @extend in Sass affect CSS file size?

A It reduces file size by merging duplicate styles

B It increases file size by adding more selectors

C It has no effect on file size

D It duplicates styles in the CSS output

DevTools: Network

How to check: Open DevTools, go to Network tab, filter by CSS files, and compare file sizes before and after using @extend.

What to look for: Look for reduced CSS file size and faster CSS download times indicating less duplication.