How to Find and Remove Unused CSS
Quick answer: A CSS rule is a candidate for removal if its selector doesn't match anything in your page's HTML. You can check this by hand for a small stylesheet, with Chrome DevTools' Coverage tab for a real page load, or with a tool that compares your CSS against your HTML directly. None of these are certain — classes added by JavaScript at runtime won't show up as used in a static check, so review before deleting.
How does a stylesheet end up with rules nothing uses?
Almost never on purpose. A component gets built, then later replaced, and whoever did the replacing changed the HTML but not the CSS file. A starter theme or framework ships styles for a card layout, a modal, a pricing table — components the site never actually adopted. Someone copies a chunk of CSS from another project to solve one specific problem and never trims what came along with it. Each of these adds a handful of rules. Over a couple of years, a handful of rules a dozen times over is a stylesheet where a third of it doesn't do anything.
How do you check by hand?
For a small stylesheet, pick a class name and search your HTML (or your templates, if the site is built from components) for it. If it's not there, it's a candidate. This works, and it's exact for stylesheets under a few hundred lines. It doesn't scale past that — checking every selector in a few-thousand-line file by hand isn't a reasonable way to spend an afternoon.
What does Chrome DevTools' Coverage tab tell you?
Open DevTools, then the command menu (Cmd+Shift+P or Ctrl+Shift+P), and run "Show Coverage." Reload the page with it recording, and it shows what percentage of each loaded CSS (and JavaScript) file actually executed during that page load — down to which lines were used and which weren't, highlighted directly in the Sources panel.
This measures actual execution, which is a meaningful difference from a static check: if you interact with the page while it's recording (open a modal, expand an accordion), styles that only apply in those states get counted as used. The limitation is scope. Coverage reflects the one page you loaded and the one session you recorded it in — a rule unused on the page you tested might be essential on a page you didn't.
Free Web Design & Marketing Guides. Practical guides on web performance, SEO, and getting more from your website — no email gate. Browse the Guides →
What does a static comparison tool add?
A build-based tool like PurgeCSS runs this kind of check as part of a build pipeline, scanning your templates and stripping selectors that don't appear anywhere in them. That's the right call for a project that already has a build step. For a page or a component you're checking one-off — no build tool, nothing to install — a browser-based comparison does the same core job: parse your CSS into individual rules, test each selector against the HTML you provide with the browser's own selector engine, and flag whichever ones match nothing.
The Remove Unused CSS tool on this site works this way. Paste your HTML and your CSS, and it splits the stylesheet into "used" and "possibly unused" — keeping @media, @font-face, and @keyframes blocks untouched, since deciding whether an animation or a breakpoint is genuinely dead needs more context than one HTML snapshot provides. It doesn't delete anything for you. It tells you what to look at.
Frequently asked questions
How does unused CSS end up in a stylesheet in the first place?
Features get built and later removed, but their CSS doesn't always get removed with them. A framework or starter theme brings styles for components the site never uses. A redesign changes the markup without anyone going back to delete the old selectors. It accumulates a little at a time, not all at once.
Can a tool ever be 100% certain a CSS rule is unused?
No, not from static analysis alone. A class added by JavaScript only when a user clicks something, or only on a page you didn't check, won't appear as used even though it is. Static tools can tell you what's definitely used and what's a candidate for removal — the final call still needs a human.
What's Chrome DevTools' Coverage tab, and how is it different?
Coverage measures which CSS and JavaScript bytes actually executed during a real page load, including everything triggered by user interaction while it's recording — closer to real usage than a static match, but it only reflects the one page (and the one session) you recorded, not your whole site.