Component variant generation in SASS - Performance & Optimization

Performance: Component variant generation

MEDIUM IMPACT

This affects CSS bundle size and rendering speed by controlling how many CSS rules are generated and applied.

Creating multiple style variants for a button component

SASS

$button-colors: (primary: blue, secondary: gray, danger: red, success: green, warning: orange, info: teal);
@each $name, $color in $button-colors {
  .btn-#{$name} {
    background-color: $color;
    padding: 1rem;
    border-radius: 0.5rem;
  }
}

Uses a map and loop to generate variants efficiently, reducing repetition and CSS size.

📈 Performance GainSaves ~1-2kb by avoiding redundant code and reduces style recalculations

Creating multiple style variants for a button component

SASS

@mixin button-variant($name, $color) { .btn-#{$name} { background-color: $color; padding: 1rem; border-radius: 0.5rem; } }
@include button-variant('primary', blue);
@include button-variant('secondary', gray);
@include button-variant('danger', red);
@include button-variant('success', green);
@include button-variant('warning', orange);
@include button-variant('info', teal);

Generates separate CSS rules for each variant, increasing CSS size and causing longer style calculation.

📉 Performance CostAdds ~3-5kb to CSS bundle and triggers multiple style recalculations on load

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Many explicit variant classes	Low	Low	Medium (due to large CSS)	[X] Bad
Variant generation with loops and maps	Low	Low	Low	[OK] Good

Rendering Pipeline

Sass compiles variant styles into CSS rules. More variants mean more CSS selectors and declarations, increasing style calculation and paint time.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to many CSS selectors

Core Web Vital Affected

LCP

This affects CSS bundle size and rendering speed by controlling how many CSS rules are generated and applied.

Optimization Tips

1Avoid generating unused or excessive CSS variants.

2Use Sass loops and maps to create variants efficiently.

3Keep CSS bundle size small to improve page load and rendering speed.

Performance Quiz - 3 Questions

What is a main performance risk of generating many CSS component variants?

A More JavaScript execution time

B Increased CSS bundle size and slower style calculation

C Higher DOM node count

D Slower image loading

DevTools: Performance

How to check: Record page load and observe Style Recalculation and Layout timings; check CSS size in Network panel.

What to look for: Long Style Recalculation or large CSS file size indicates inefficient variant generation.