CSS Performance

CSS affects rendering, layout, and maintainability — styles should remain efficient and predictable.

01 — Purpose

Styles that do not slow render

CSS affects rendering, layout, and maintainability — styles should remain efficient and predictable.

Bloated stylesheets, expensive selectors, and layout-triggering animations show up as slow paint, janky scroll, and long tasks — even when JavaScript looks lean.

See CSS architecture, cascade layers, and rendering performance.

02 — Principles

Efficient CSS supports smooth rendering

Restrained specificity, efficient selectors, and limited unused CSS.

  • restrained specificity — flat selectors, layers over escalation
  • efficient selectors — avoid universal and deep descendant chains
  • reduced layout thrashing — animate transform and opacity, not width/height
  • limited unused CSS — ship what the page uses

03 — Practice

Good CSS performance

Structure, tokens, and delivery working together.

  • use cascade layers — predictable order without !important wars; see cascade layers
  • split CSS by layer and route — avoid one megabyte global bundle
  • prefer custom properties for theming — fewer duplicated rules
  • audit unused rules in CI — purge or delete dead styles periodically
  • contain expensive components — contain or careful isolation where profiling shows benefit

04 — Avoid

CSS that hurts render

Giant unused stylesheets and animation-heavy layouts tax every page.

  • giant unused stylesheets — framework imports with 90% dead code
  • deeply nested selectors — hard to match, hard to override, slow to resolve
  • animation-heavy layouts — transitioning top, left, width on large surfaces
  • @import chains blocking parallel CSS download
  • render-blocking CSS beyond critical path — defer non-critical where possible

05 — Close

Profile paint before adding CSS

If a style change regresses INP or scroll, trace layout and paint cost.

CSS performance is maintainability performance — messy architecture leads to heavier overrides and larger bundles. Invest in structure and tokens early.

See design tokens, rendering performance, and CSS standard.