CSS Class Extractor

What this tool is used for

• Listing every class used in a page's markup.
• Finding which classes appear most often.
• Auditing markup against a stylesheet to find unused rules.
• Producing a class inventory from an inherited template.
• Comparing two pages' class usage to find divergence in a shared template.

Frequently Asked Questions

Does it read JSX as well as HTML?

Yes — the matcher accepts `class` and `className`, and values in double quotes, single quotes or backticks. That covers plain HTML, JSX, and template literals, which is where most component markup actually lives.

What does the frequency count mean?

How many times the class appears across all elements, not how many distinct elements carry it. In a utility-first codebase the top entries are usually layout primitives, which is a fair signal of what belongs in a shared component.

Are dynamic class names picked up?

Only the literal text. A class assembled at runtime — `className={isActive ? 'on' : 'off'}` — yields whatever string literals appear inside the attribute, and a name built by concatenation is not recovered at all.

Why output classes with a leading dot?

So the list can be pasted straight into a stylesheet as selectors. The CSS output format goes further and emits each name as an empty rule, which is a quick way to scaffold styles for markup that has none yet.

Can this find unused CSS?

It gives you one half of the comparison — the classes markup actually uses. Diffing that against the selectors defined in your stylesheet is what identifies dead rules; the CSS-compare tool is built for that second step.

Are duplicate classes on one element counted twice?

Yes, because the value is split on whitespace and each token counted. `class="btn btn"` is redundant markup rather than a parsing artefact, and seeing the count is more useful than silently collapsing it.

Common errors and gotchas

• Extracting from source rather than rendered output, where JavaScript adds classes.
• Assuming an extracted class exists in the stylesheet, which extraction cannot tell you.
• Missing classes built by string concatenation, which no static scan will find.
• Treating the list as a purge candidate set without checking dynamically applied classes.
• Overlooking classes inside inline SVG or template literals.