Why it matters
Stylesheets only grow. Components get deleted but their CSS stays, frameworks ship every utility, and every byte of CSS blocks rendering. Lighthouse's "reduce unused CSS" checks one page at a time, so CSS used on the product page looks unused on the home page, and tools like PurgeCSS need a build step and regularly strip classes that JavaScript adds later.
This finder parses your stylesheet, including nesting, layers and media queries, and tests each selector against every page you give it, after removing states such as :hover and pseudo-elements such as ::before so that a:hover counts as used when the page has links. Selector lists are trimmed to the parts that match, nested rules go with their parents, and @keyframes, @font-face rules and custom properties nothing refers to are flagged. Strings in the pages' own scripts are scanned so a menu-open class toggled by JavaScript is kept, and a safelist covers the rest. The purged file is written by editing your original source, so comments and formatting survive, and it shows raw and gzipped sizes before and after.
How it works
- InputSeveral pages and a stylesheet
- In your browserEvery selector tested on every page
- OutputUnused rules and a purged file
Where it fits in a designer's workflow
- Plan
- Design
- Build
- Test
- Launch
By the numbers
Show the numbers as a table
| Page | Elements | Selectors used | Used only here |
|---|---|---|---|
| Home | 10 | 12 | 3 |
| Product | 12 | 13 | 4 |
| About | 8 | 7 | 1 |
How to use it
- Paste a few representative pages separated by ---, or add saved .html files.
- Paste the stylesheet.
- Add classes that JavaScript adds to the safelist.
- Check the list, then copy or download the purged CSS.
FAQ
How many pages should I paste?
One of each template: home, a listing, a product or article, a form, and anything with modals or menus. CSS used only by a template you leave out will look unused.
Will it remove my :hover styles?
No. States and pseudo-elements are removed before testing, so .btn:hover is kept whenever a .btn exists.
What about classes added by JavaScript?
Strings inside the pages' scripts are scanned and matching classes are kept. For anything else, such as classes from a framework or a CMS, add names, wildcards like is-* or regular expressions to the safelist.
Is the purged file safe to ship?
Review it first: it's only as complete as the pages you gave it. Test the pages it was made from, and the states your scripts add.
Why does gzipped size matter?
Servers send CSS compressed, so the gzipped saving is what users actually download. Repetitive CSS compresses well, so the real saving is smaller than the raw one.
