Unused CSS Finder
Find Dead Rules, Then Remove Them

What An Unused CSS Finder Does

Stylesheets always grow. You add features and change the design, and old code stays behind. As a result, every visitor downloads styles for parts of your site that no longer show.

An unused css finder answers one question. Which rules can go without changing how any page looks? So this one reads your HTML, CSS and JavaScript. Then it puts every rule into one of four groups.

The groups are easy to read. First, rules that nothing uses. Next, rules where only some selectors in the list still match. Then, rules kept because a script may need them. Finally, rules your pages use right now.

The result is a plan, not a gamble. Each rule comes with a reason, so you can check it before you delete anything. After that, you download the clean stylesheet in one step.

How This Unused CSS Finder Reads Your Code

The work happens in three passes. First, the page turns your HTML into a tree of elements, each with its class, id and attributes. Then it reads your CSS and splits every selector list into single selectors. Finally, it tests each selector against each element.

Your browser does all of this. Because this site blocks unsafe ways of reading markup, the finder uses its own reader. So it never runs the code you paste, and a pasted script does nothing.

The matching follows the real rules of CSS. For example, a space means descendant, and a greater-than sign means child. Also, :nth-child counts siblings just like a browser does. So when a selector misses your markup, the report says so.

Find Unused CSS Across Several Pages

One page rarely shows the full picture. For example, a checkout rule looks dead on the home page, yet the checkout needs it. That is why this tool takes as many pages as you give it.

You can paste several pages into one box. Just start each new page with a comment line that says page. Or upload your HTML files instead, and each file counts as one page.

Each used rule also shows where it lives. For example, used on 2 of 5 pages tells you a style belongs to one template. So this hint helps when you later split a big stylesheet into smaller ones.

Why One Page Is Not Enough

Most sites share one stylesheet across many templates. So if you test a single page, about half the file looks unused, which is wrong. But add a product page, a blog post and a contact form, and the real dead weight shows up.

The rule of thumb is simple. Add one page of every kind your site has, because the finder can only judge the pages it sees.

Classes Your JavaScript Adds Later

Menus open, tabs switch and pop-ups appear. Each of these adds a class with a script, so the class is not in the HTML at first. As a result, a careless tool calls those rules unused, and deleting them breaks the menu.

This finder reads your scripts too. It collects every string in them, even the parts of template strings. So if a script mentions is-open, the rule for .menu.is-open stays, with a label instead of a delete.

Prefixes matter as well. For example, a script that builds btn--${state} can make any class that starts with btn--. Therefore every rule for those classes stays, and the label explains why.

Framework bindings get the same care. The finder scans Vue, Alpine and Angular class attributes, plus data attributes and inline event handlers. In short, it covers the usual places where hidden classes come from.

The Safelist For Everything Else

Some classes come from places no tool can read. For example, a plugin may add them on the server, or an editor may type them by hand. For those, use the safelist.

Each line takes a class name, a name with a star, or a pattern between slashes. So wp-* keeps every WordPress class. Also, a pattern like /^is-/ keeps every state class at once.

Pseudo-Classes, Pseudo-Elements And States

Many unused css tools go wrong right here. They look for .card::after or .menu summary::before, find no such element, and call the rule dead. But a pseudo-element styles part of its element. So the rule counts as used whenever the element exists.

States work the same way. When a page first loads, nobody has hovered, focused or checked anything yet. However, visitors soon start to hover and click. So :hover, :focus and :checked count as reachable here.

Structure still counts, though. For example, li:nth-child(4) in a list of three items never matches, because no click can add a fourth item. In short, the finder only keeps what could really match.

An Unused CSS Remover That Keeps Your Formatting

Finding dead rules is only half the job. The other half is a clean file you can ship. So this unused css remover cuts dead rules out of your own text. It does not rebuild your stylesheet.

Your comments, spacing and order all stay. When only part of a selector list is dead, just that part goes. Also, the remover drops empty media queries.

You pick the shape of the result. Keep it readable for your project, or tick minify for a smaller copy. Then copy it, or download it next to the CSV report.

Dead @keyframes, Fonts And Variables

Rules are not the only dead weight. An unused animation, an unused font and a custom property nobody reads all cost bytes too. So the finder lists each of them under its own heading.

This check runs after the dead rules are gone. As a result, the finder also marks a font as unused when only a removed rule used it. A plain text search would miss that.

It also catches the opposite mistake. If a rule reads a custom property that nothing sets, the finder lists it. Usually, that means a typo or a missing file.

Fetch A Live Page By Its Address

Sometimes you only have the web address. In that case, type it in, and this site fetches the page, its stylesheets and its own scripts. Then the check runs in your browser as usual.

The fetch is careful. It follows one level of @import, skips scripts from other sites and stops at a safe size. So a tag manager or a chat widget does not waste your time.

This mode is good for a quick look at a site you do not own. However, for your own project, paste or upload the source files. That way, you can add every template at once.

What The Finder Cannot Know

No static check sees everything. For example, a class built from a server value, or markup a script loads later, stays hidden. That is why every removal comes with a reason you can read first.

So treat the result like a code review. Check the unused list, safelist what you need, and test the clean file on a staging copy. For a second opinion, the Coverage panel in Chrome DevTools shows what one visit used.