Performance
Unused CSS
Unused CSS is stylesheet code that matches no element on the page being viewed. It still downloads, parses, and takes part in style calculation.
How it is measured
The Chrome DevTools Coverage tab records which bytes of each stylesheet applied during a session and shows the percentage unused. Lighthouse's 'Reduce unused CSS' reports potential savings for that page load only.
One page's unused rules may be used on another, so measure across your key templates and interactions, such as opening the menu or a modal, before deleting. PurgeCSS and Tailwind's content scanning remove rules at build time by reading your templates.
Worked example
A WordPress site loads a 187 KB theme stylesheet plus 64 KB of page builder CSS on every page. Coverage on a blog post shows 91% of the theme and 97% of the builder unused. The post itself needs about 22 KB.
Splitting CSS per template and dropping the builder CSS where no builder blocks appear cuts CSS transfer from 251 KB to 38 KB, and FCP moves from 2.3 s to 1.7 s.
How it differs
Unused CSS is dead weight in styles, and unused JavaScript is dead weight in scripts. The CSS kind delays rendering because stylesheets must arrive before paint. Unused JS costs execution time, but if it is deferred it may not delay the first paint at all.
Common errors
Deleting rules used only after an interaction. Trusting a single-page coverage report. Purging classes that JavaScript builds at runtime. Removing a stylesheet that one template still needs. Not re-testing after plugin updates.
In practice
Record Coverage on your three top templates, including opening menus. Where a stylesheet is mostly unused everywhere, split or purge it. Where it is template-specific, load it only there. Compare CSS bytes and FCP before and after.