CSS Variable Checker

Using the CSS Variable Checker

Why check variables

A typo in a custom property name fails silently: var(--bordr-color) simply resolves to nothing and the property falls back to its initial value. In a large stylesheet these mistakes are hard to spot by eye, which is what this checker is for.

What the report shows

Defined variables with the selectors that set them, variables used with how many times, variables used but never defined in the pasted CSS (an error if there is no fallback, a warning if there is one), and variables defined but never used, which are candidates for clean-up.

Fallbacks

var(--text, #F5F7FA) uses the second value when --text is not set. Fallbacks make components robust when they are dropped into a page without your design tokens, so they are reported as a softer warning.

Limits

The checker only sees the CSS you paste. Variables can also be set in other stylesheets, inline styles or JavaScript, so treat an undefined variable as something to verify rather than a certain bug.

Naming custom properties

Consistent names prevent most variable bugs. A common pattern is category first, then role, then variant: --color-text, --color-text-muted, --space-4, --radius-card. Keep design tokens in one :root block so the checker, and your teammates, can see every definition in one place.

Frequently asked questions