# CSS Analyzer (CSS Studio)

Paste CSS or drop a .css file to see the most specific selectors, CSS custom properties that are defined but never used, var() calls with no definition, every color in use, and !important, repeated declarations and empty rules. This tool only reads; it never changes your input.

- URL: https://tools.itlibra.com/en/css-studio
- On-device・No upload
- Last updated: 2026-10-26

## How to use

1. Paste CSS into the input, or choose a .css file (drag and drop also works).
2. Press Analyze. Ctrl+Enter (⌘+Enter on Mac) also runs it. A sample is available to try first.
3. Overview lists rule, selector and declaration counts and every @media, @supports, @layer and @container. Specificity shows the highest selectors and their distribution; the calculator gives (a,b,c) for any selector you type.
4. Variables matches definitions with uses. Colors groups the same color written in different notations.
5. Issues lists !important, duplicate selectors and declarations, empty rules, vendor-prefix-only rules and syntax problems, with line numbers.

## Use cases

- Check whether !important or repeated declarations keep growing
- Clean up CSS custom properties that nothing uses
- Find selectors so specific that they are hard to override
- Build a list of the colors a site uses
- Locate a missing closing brace in a broken stylesheet

## What it does

### Own tokenizer

Comments, strings and url() are skipped as tokens, not as text, and rules, at-rules and declarations are counted separately. Nested rules are supported (the thinking of CSS Syntax Level 3).

### Specificity per Selectors Level 4

#id counts as a, .class, \[attribute\] and :pseudo-class as b, and type selectors and ::pseudo-elements as c. :is(), :not() and :has() count their most specific argument and :where() counts 0 (Selectors Level 4 §17).

### Variables matched by definition and use

Lists --name definitions, var(--name) uses and whether a fallback is given. Variables defined but never used are shown apart from var() calls with no definition.

### Same color, one row

#fff, #ffffff, rgb(255 255 255) and white are grouped as one color, with the count and the notations as written. Transparency is kept apart.

### Problems as leads, not verdicts

Shows !important, duplicate selectors, duplicate declarations, empty rules, vendor-prefix-only rules and missing closing braces with line numbers. These are things to check, not confirmed errors.


## Capability matrix

| Feature | Support | Notes |
| --- | --- | --- |
| Counts of rules, selectors and declarations | Supported | Includes nested rules |
| List of @media, @supports, @layer and @container | Supported | — |
| Selector specificity (a,b,c) | Supported | Selectors Level 4 §17. A nested & does not add its parent’s specificity |
| CSS variables (--name): definitions, uses and fallbacks | Supported | Matched within the stylesheet you paste only |
| Color list (#rgb, rgb(), hsl(), named colors) | Supported | oklch(), lab() and color-mix() are not counted |
| Formatting and minifying CSS | Not supported | Use code\_formatter |
| Fetching @import targets or external CSS | Not supported | No network access. Paste the CSS after it is combined |
| Parsing Sass, Less or PostCSS syntax | Not supported | Give it compiled, plain CSS |
| Full syntax checking against every CSS rule | Partial | Only major problems: missing braces, unclosed strings and comments, shown as leads |
| Variables set from JavaScript with setProperty | Not supported | Not visible here, so they may appear as unused |

## Limits & notes

- Input is limited to 5 MB (UTF-8). Larger files are not read.
- Top specificity selectors and each issue list show up to 200 items; counts include every item.
- The single-selector calculator accepts up to 2,000 characters.
- Variables are matched only within the CSS you paste.

## Privacy & safety

The CSS you enter is analyzed only in your browser. It is never sent anywhere, and file names are not recorded.

## FAQ

### What is CSS specificity (a,b,c)?

It is a three-part weight for a selector. a counts #id, b counts .class, \[attribute\] and :pseudo-class, and c counts type selectors and ::pseudo-elements. The higher value wins; with equal values, the rule written later wins.

### How are :is(), :where() and :not() counted?

:is(), :not() and :has() count their most specific argument, and :where() counts as 0 (Selectors Level 4). :nth-child(… of S) adds the weight of S. A nested & in CSS nesting is counted without its parent’s specificity.

### How does it decide a CSS variable is unused?

A variable that is defined (--name:) in the stylesheet you paste and never used in var(--name) is listed as unused. Variables set or read by JavaScript or other files can appear unused here.

### Which color notations are counted?

#rgb, #rgba, #rrggbb, #rrggbbaa, rgb(), rgba(), hsl(), hsla() and the 148 CSS named colors. Same colors are grouped under #rrggbb, and colors with transparency get their own row. oklch() and lab() are not counted.

### Is my CSS sent to a server?

No. The analysis runs in a Web Worker inside your browser and makes no network requests. Nothing you paste or the file name is recorded.