About

Unused CSS creates unnecessary network overhead. Browsers must download, parse, and construct the CSSOM for every rule in a stylesheet, regardless of whether that rule applies to the current DOM. This redundant processing delays the First Contentful Paint (FCP) and consumes memory on mobile devices. Refactoring often leaves behind orphaned selectors that no longer match any element. Manual auditing is tedious and prone to human error.

This tool utilizes a virtual DOM environment to simulate the browser's matching engine. It injects your HTML structure and iterates through the provided CSS rules to verify selector matches. It handles complex specificity chains and standard combinators. By identifying and removing dead code, developers can significantly reduce payload size and improve rendering performance for end users.

Formulas

Optimization potential is calculated by comparing the byte size of unused rules against the total stylesheet size. The efficiency metric E is defined as:

E = S_total − S_unusedS_total × 100%

Where S represents the string length (in bytes) of the CSS content. A lower efficiency score indicates a high volume of dead code (Technical Debt).

Reference Data

Selector Type	Specificity Weight	Performance Impact	Usage Context
ID Selector #header	100	High (Fast lookup)	Unique elements like navigation bars or main containers.
Class Selector .btn	10	Medium	Reusable components, utility classes, and layout grids.
Type Selector div	1	Low (Broad matching)	Base styles, resets, and typography defaults.
Universal *	0	Low (Expensive)	Global box-sizing resets or debug outlines.
Pseudo-class :hover	10	Variable	Interactive states. Hard to detect statically without triggers.
Attribute [type="text"]	10	Medium	Form inputs and data-attribute styling.
Combinator div > p	N/A (Adds up)	Medium	Parent-child relationships and scoped styling.
Pseudo-element ::before	1	Low	Cosmetic decorations and clearfix hacks.

Frequently Asked Questions

No. This tool performs static analysis on the HTML snapshot you provide. If your application dynamically adds classes (e.g., toggling a ".active" state) or injects elements after load, those selectors might be flagged as unused. You must verify dynamic dependencies manually before deletion.

The analyzer checks the base element. For a selector like "a:hover", the tool verifies if an "" tag exists in the HTML. If the base element is present, the rule is marked as "Used" to prevent accidental deletion of interactive states.

Responsive designs often hide elements on specific screen sizes. A robust analyzer must parse rules inside "@media" blocks. This tool recurses into media blocks to check selectors against the HTML structure, treating them as conditional rules.

Reset stylesheets (like Normalize.css) target generic tags (e.g., "table", 'blockquote') to ensure browser consistency. Even if your specific snippet doesn't use a "blockquote", removing the reset rule might break future content. It is generally safer to keep global resets.

No. Specificity determines which style wins when multiple rules apply. This tool only checks if a selector matches *at least one* element. Even if a rule is overridden by a more specific one, it is technically "used" (matched) but potentially redundant (overwritten).