Why mixins eliminate duplication in SASS - Performance Evidence

Performance: Why mixins eliminate duplication

MEDIUM IMPACT

This affects CSS file size and browser style recalculation by reducing repeated code blocks.

Applying the same style rules repeatedly in CSS

SASS

@mixin common-padding { padding: 1rem 2rem; border-radius: 0.5rem; } @media (min-width: 600px) { .btn { @include common-padding; } } .card { @include common-padding; }

Mixins reuse style code, reducing duplication and CSS file size.

📈 Performance GainSaves kilobytes in CSS and reduces style recalculations.

Applying the same style rules repeatedly in CSS

SASS

@media (min-width: 600px) { .btn { padding: 1rem 2rem; border-radius: 0.5rem; } } .card { padding: 1rem 2rem; border-radius: 0.5rem; }

Repeating identical style blocks increases CSS size and parsing time.

📉 Performance CostAdds extra kilobytes to CSS file and triggers multiple style recalculations.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated CSS blocks	No extra DOM nodes	Multiple style recalculations	Higher paint cost due to slower style calculation	[X] Bad
Using mixins for reuse	No extra DOM nodes	Single style recalculation per unique rule	Lower paint cost due to efficient style calculation	[OK] Good

Rendering Pipeline

Mixins reduce CSS file size, which speeds up CSS parsing and style calculation stages in the browser.

→Style Calculation

→Layout

⚠️ BottleneckStyle Calculation due to repeated CSS rules

Core Web Vital Affected

LCP

This affects CSS file size and browser style recalculation by reducing repeated code blocks.

Optimization Tips

1Use mixins to write reusable CSS blocks and avoid repeating code.

2Reducing CSS duplication lowers file size and speeds up style calculation.

3Smaller CSS files improve Largest Contentful Paint (LCP) by loading styles faster.

Performance Quiz - 3 Questions

How do mixins improve CSS performance?

A By increasing the number of DOM nodes

B By adding more CSS rules for each element

C By reducing repeated CSS code and lowering file size

D By delaying CSS parsing until user interaction

DevTools: Performance

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

What to look for: Fewer and shorter style recalculation events indicate better CSS reuse and less duplication.