CSS Analyzer & Stylesheet Stats
Paste a stylesheet, or open a .css file, to get an instant report on what’s inside it: file size and minified size, rules, selectors and declarations, the colors and fonts it uses, the most common properties, the most specific selectors, media queries and custom properties.
The analyzer also points out common problems, such as !important overuse, ID selectors, repeated selectors, empty rules and custom properties that are used but never defined. The report updates as you type, and everything runs in your browser.
CSSStylesheet
Paste CSS above, or choose Sample, to see the report.
About this tool
What the report shows
- Size: the file size and roughly how small it would be minified.
- Structure: rules, selectors, declarations, unique properties and at-rules such as
@media,@keyframesand@font-face. - Colors: every hex,
rgb(),hsl(),oklch()and named color, with swatches and how often each is used. - Typography: font families, font sizes and length units.
Specificity
Specificity decides which rule wins when several match the same element. It’s shown as three numbers: IDs, then classes, attributes and pseudo-classes, then elements and pseudo-elements. #nav .item a is 1 – 1 – 1.
The analyzer follows the current rules: :where() adds nothing, and :is(), :not() and :has() count their most specific argument. For a single selector, try the CSS Specificity Calculator.
Findings
Findings point out patterns that make CSS harder to maintain: !important, ID selectors, repeated selectors, empty rules, selectors more than four levels long, large color palettes, many z-index values, vendor prefixes and @import. Custom properties that are used but not defined, or defined but not used, are listed too.
These are suggestions, not errors. To check for invalid CSS, use the CSS Validator.
Private and fast
The stylesheet is analyzed in your browser, so it’s never uploaded. Comments are ignored, nested CSS is understood, and large framework files with thousands of rules are analyzed in a moment.
Frequently Asked Questions
What does the CSS Analyzer do?
It reads a stylesheet and reports what’s in it: size, rules, selectors, declarations, colors, fonts, the most-used properties, specificity, media queries and custom properties. It also lists common problems such as !important overuse, ID selectors, repeated selectors and empty rules. The report updates as you type.
How is specificity calculated?
Each selector gets three numbers: the count of IDs, then classes, attributes and pseudo-classes, then elements and pseudo-elements. Selectors are compared number by number from the left. The analyzer follows Selectors Level 4: :where() counts as zero, :is(), :not() and :has() count their most specific argument, and :nth-child(… of S) adds the selector inside it.
Why are ID selectors and !important flagged?
Both make styles hard to override. An ID outweighs any number of classes, and !important beats normal declarations whatever their specificity, so later changes need even stronger selectors or more !important. They aren’t errors, but using fewer of them usually makes a stylesheet easier to maintain.
Which colors does it detect?
Hex colors, rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color() and the named CSS colors, in color properties, shadows, gradients and custom properties. Short and long hex forms of the same color, such as #fff and #ffffff, count as one color.
What does “used but never defined” mean for custom properties?
The stylesheet uses var(--name) but never sets --name. If it’s defined in another stylesheet that loads on the same page, that’s fine. If not, the browser uses the fallback value in var(), or treats the declaration as invalid.
Does it support nested CSS, SCSS or Less?
Native CSS nesting is supported: nested rules are combined with their parent selector, so .card { &:hover {} } is analyzed as .card:hover. SCSS and Less files are read as CSS, so plain rules are analyzed, but variables, mixins and functions aren’t evaluated. Compile them to CSS first for an accurate report.
Is the minified size exact?
It’s an estimate made by removing comments and extra whitespace. A full minifier can make files a little smaller by shortening values too. Use the CSS Formatter to minify a stylesheet.
Is my CSS uploaded?
No. The analyzer runs entirely in your browser, so your stylesheet never leaves your device and nothing is stored.