Analyzers · Free CSS tool

CSS Analyzer & Stylesheet Stats

Free · no sign-up Live preview · copy or download the CSS

A health report for any stylesheet: rules, selectors and declarations counted; the properties you lean on most; every color collected; !important usage; average and worst-case specificity — the numbers that tell you what refactoring will find.

Settings

Results appear here.
Generated CSS — updates live


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 25 minCSS Specificity & ArchitectureWhat the scores mean.STEP 2 · 20 minCSS Custom PropertiesThe fix for color sprawl.STEP 3 · 20 minCSS Performance & Best PracticesWhy lean stylesheets win.


  1. CSS Specificity CalculatorCalculators
  2. Duplicate CSS RemoverCode Quality
  3. Unused CSS FinderAnalyzers
  4. CSS Gzip Size EstimatorCode Quality
  5. CSS Property SorterCode Quality


How it works


The analyzer parses rules and declarations, tallies property usage, harvests every color literal, and scores each selector's specificity — surfacing exactly the things refactors chase: color sprawl (candidates for custom properties), !important flags (specificity fights), and heavyweight selectors (architecture debt).


Numbers are diagnostic, not judgmental — a design-heavy stylesheet legitimately has many colors. The value is the delta: analyze before and after a cleanup and watch the story change.


Run the code — try it yourself
This stylesheet has deliberate smells: an !important, an over-specific selector, and near-duplicate colors. Find all three by eye, then confirm with the analyzer.


exercise.html — editable


Frequently asked questions
What's a 'good' number of colors?
Design systems typically run on a token palette of a dozen-ish values plus derived tints. Fifty scattered hexes usually means copy-paste drift.
Is average specificity meaningful?
As a trend, yes: flat class-based architecture averages low. One #id-chain outlier matters more than the average, which is why the heaviest selector is named.
Does it analyze @media contents?
Rules inside media queries are counted like any others; the at-rule wrapper itself isn't a rule.


Keep going
Measurement turns 'this CSS feels messy' into a work list. Fix what it finds with the Duplicate Remover and Unused CSS Finder.
CSSmatic is a non-profit project, made by developers for developers.