Diagnose and shrink a large CSS bundle

WHAT THIS TESTS Whether you treat CSS performance as a measure-then-fix loop and know the concrete tools, not just generic advice to make it smaller.

A GOOD ANSWER COVERS Start by diagnosing. Use the browser Coverage panel to see what percentage of shipped CSS is actually used, and a bundle analyzer to see which files dominate. Then apply techniques. First, purge unused selectors with PurgeCSS or a framework's built-in purge, which scans templates and drops rules nothing references. Second, minify and optimize with cssnano via PostCSS, which strips whitespace, merges duplicate declarations, and collapses longhand. Third, split delivery: extract critical above-the-fold CSS to inline and defer the rest, and code-split CSS per route so a page only loads what it needs. Additionally, flatten Sass nesting, since deep nesting multiplies selector length and bytes, and audit for duplicated mixins that emit repeated rules.

COMMON WRONG ANSWERS Claiming minification alone solves it ignores that dead rules and duplication are the bigger wins. Deleting CSS by hand does not scale and regresses. Blaming the framework without measuring real usage. Forgetting that deeply nested Sass and overused @extend can balloon output.

LIKELY FOLLOW-UPS How does PurgeCSS handle dynamically generated class names? Use a safelist. What is critical CSS and how do you generate it? Tools like Critical extract above-the-fold rules. How do you prevent regressions? Add a size budget check in CI.

ONE CONCRETE EXAMPLE A dashboard ships 400 KB of CSS. Coverage shows 70 percent unused because the whole component library loads globally. Adding PurgeCSS scoped to actual templates drops it sharply, cssnano merges duplicates, and route-level code splitting means the login page no longer downloads dashboard styles. Extracting critical CSS for the first view defers the rest, improving first paint. A CI size budget then fails the build if CSS grows past the agreed threshold, so the regression cannot quietly creep back in.