Writing reusable CSS - Performance & Optimization

Performance: Writing reusable CSS

MEDIUM IMPACT

This affects page load speed and rendering efficiency by reducing CSS size and minimizing style recalculations.

Applying similar styles to multiple elements

CSS

.btn { padding: 1rem; border-radius: 0.5rem; color: white; }
.btn-primary { background-color: blue; }
.btn-secondary { background-color: gray; }

Extracts shared styles into a single reusable class, reducing CSS size and style recalculations.

📈 Performance GainSaves CSS bytes and reduces style recalculations to a single pass for shared properties.

Applying similar styles to multiple elements

CSS

.btn-primary { background-color: blue; color: white; padding: 1rem; border-radius: 0.5rem; }
.btn-secondary { background-color: gray; color: white; padding: 1rem; border-radius: 0.5rem; }

Repeats common styles like padding and border-radius in multiple classes, increasing CSS size and causing redundant style recalculations.

📉 Performance CostAdds unnecessary CSS bytes and triggers multiple style recalculations during rendering.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Duplicated styles in multiple classes	No extra DOM nodes	Multiple reflows due to repeated style recalculations	Higher paint cost due to inefficient styles	[X] Bad
Shared reusable classes for common styles	No extra DOM nodes	Single reflow for shared styles	Lower paint cost with efficient style application	[OK] Good

Rendering Pipeline

Reusable CSS reduces the amount of CSS the browser must parse and apply, minimizing style recalculations and layout thrashing.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation

Core Web Vital Affected

LCP

This affects page load speed and rendering efficiency by reducing CSS size and minimizing style recalculations.

Optimization Tips

1Extract common styles into shared classes to reduce CSS size.

2Avoid repeating identical style declarations in multiple selectors.

3Use semantic and reusable class names to improve maintainability and performance.

Performance Quiz - 3 Questions

What is a main performance benefit of writing reusable CSS classes?

A Reduces CSS file size and style recalculations

B Increases the number of DOM nodes

C Triggers more layout thrashing

D Blocks JavaScript execution

DevTools: Performance

How to check: Record a performance profile while loading the page and interacting with styled elements. Look for style recalculation and layout events.

What to look for: Lower time spent in 'Recalculate Style' and fewer layout events indicate better reusable CSS performance.