How does CSS affect performance?

CSS affects frontend performance far more than it seems. It's involved not just in "looking good," but in how fast the browser can render and update the page.

---

#1. Blocks rendering

The browser does not start painting the page until it has loaded and parsed all the CSS. That means even 1 line in <link rel="stylesheet"> can delay the first pixel.

→ This is called render-blocking CSS.

---

#2. Complicates layout

The more complex the selectors (.a .b > .c[attr]), the deeper the nesting, and the less stable the sizes, the longer the browser takes to recalculate layout. This is especially critical during resize, scrolling, and animations.

---

#3. Triggers reflow and repaint

Some CSS properties (for example width, height, margin, position) trigger reflow when changed (a full recalculation of positions). Others (color, background, visibility) trigger only repaint. The lightest ones (transform, opacity) avoid this entirely and are ideal for animations.

→ If CSS animations are not built with transform/opacity, they can lag.

---

#4. Adds unused code

Large CSS files where only 10% of the styles are actually applied on the page drag in extra bytes and get in the way of optimization and parsing.

→ Analyzing with Coverage in DevTools helps find the excess.

---

#5. Affects CLS (Cumulative Layout Shift)

If images, fonts, or blocks load with a delay and CSS does not set clear dimensions, elements "jump" after loading. That hurts UX and SEO.

---

Conclusion: CSS is not just styling. It's part of the browser's render pipeline. Well-written CSS means a fast, stable, responsive interface. Bad CSS means lag, jank, white screens, and frustration.