Suggest an editImprove this articleRefine the answer for “How does CSS affect performance?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**CSS affects frontend performance** far more than it seems: it blocks rendering, complicates layout, triggers reflow and repaint, and poorly optimized CSS adds unused code and hurts CLS. **Key point:** well-written CSS means a fast, stable, responsive interface; bad CSS means lag, jank, white screens, and frustration.Shown above the full answer for quick recall.Answer (EN)Image**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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.