CSS affects performance in two distinct ways: bytes over the wire and work on the main thread. The bytes come from unused rules shipped because removing them by hand is tedious. Tools such as PurgeCSS and the Tailwind JIT engine analyze actual usage in markup files and strip selectors that never match, often cutting stylesheet size dramatically. Minification reduces whitespace and shortens identifiers, and CSS-in-JS frameworks should ideally compile-time generate styles rather than inject them at runtime, which keeps both bundle size and CPU work low. Runtime CSS-in-JS frameworks add overhead that compounds during hydration and is one of the easiest stylesheet wins to overlook.
Main-thread cost comes from style calculation and layout cascading. The contain property is one of the cleanest mitigations: layout, paint, size, and content containment each tell the browser that a subtree's work is independent, so updates inside it cannot affect the rest of the page. content-visibility set to auto goes further, skipping rendering of off-screen content entirely until it scrolls into view; on long pages with many sections, this single property can be a major win because the browser stops paying layout and paint cost for content the user has not reached. Critical CSS inlined in the document head lets the browser paint above-the-fold content without waiting on the full stylesheet, shrinking FCP and LCP. Tools such as critical and critters automate extraction at build time based on actual page render.
Avoiding specificity wars and !important rules is mostly a hygiene concern rather than a performance one, but cascades become unpredictable, which slows future optimization work. Following the standard rule that id selectors are stronger than class selectors, which are stronger than element selectors, keeps calculations fast and reasoning easy. As with JavaScript, the simplest CSS performance advice is to ship less of it, prioritize what is needed for first paint, and isolate subtrees whose changes should not ripple outward to the rest of the page.
For replaced elements such as images and video, an aspect-ratio rule ensures layout stability even before the asset arrives, reducing CLS to zero for that element. background-image remains useful for decorative tiling and pattern fills, but it cannot respect loading lazy semantics or srcset, so content images should almost always live in img or picture. Combined, these CSS techniques — containment, content-visibility, critical inlining, and unused-rule elimination — produce measurable wins on real devices, especially on mid-tier mobile hardware where style recalculation is comparatively expensive.