CSS Debugging and Tooling

CSS rarely throws errors: an invalid declaration is silently dropped and a losing one is silently overridden. Tooling makes those silent failures visible at three points: in the browser while you debug, in your editor and CI before you commit, and in the build before you ship.

CSS tooling by stage (all tools MIT licensed except Lightning CSS, MPL-2.0)
Stage	Tool	What it catches or does
Debug	DevTools Styles and Computed	Overridden, invalid and inactive declarations (Elements and Styles Panels)
Debug	Coverage panel, CSS Overview	Unused bytes per file; colors, fonts, unused declarations
Lint	Stylelint 17 245,253	Typos, bad patterns, naming rules, unsupported features
Build	PurgeCSS 8 955,901	Removes selectors your markup never uses
Build	cssnano 9 4,977 , Lightning CSS	Minify; Lightning CSS also adds prefixes
Check	caniuse.com 3,038 , Baseline	Which browsers support a feature

In Chrome 1 , open Coverage from the Command Menu (Ctrl+Shift+P, "Show Coverage") and reload: each stylesheet's bar shows unused bytes in gray, and clicking a row marks unused lines in Sources. CSS Overview lists every color, font and media query and flags low-contrast text.

Code Quality Tools installs Stylelint. Add a selector-class-pattern that enforces your architecture (CSS Architecture) and stylelint-plugin-use-baseline, which reads the web-features 939 data set to flag features that are not yet Baseline.

stylelint.config.mjs enforcing BEM names and Baseline featuresShell

export default {
  extends: ['stylelint-config-standard'],
  plugins: ['stylelint-plugin-use-baseline'],
  rules: {
    'selector-class-pattern': [
      '^[a-z][a-z0-9]*(-[a-z0-9]+)*(__[a-z0-9]+(-[a-z0-9]+)*)?(--[a-z0-9]+(-[a-z0-9]+)*)?$',
      { message: 'Use BEM: block__element--modifier' },
    ],
    'plugin/use-baseline': [true, { available: 'widely', severity: 'warning' }],
  },
};

Output

> npx stylelint styles.css
styles.css
  2:12  ✖  Disallowed unit
    length-zero-no-unit
  3:3   ⚠  Property "text-wrap" is not a widely available baseline feature.
    plugin/use-baseline
  7:3   ⚠  Property "field-sizing" is not a widely available baseline feature.
    plugin/use-baseline
  8:3   ✖  Unknown property "colr"
    property-no-unknown
✖ 4 problems (2 errors, 2 warnings)

Baseline labels a feature newly available once it works in the current Chrome, Edge, Firefox 555 and Safari 10 (desktop and mobile), and widely available 30 months later. MDN 102 and caniuse.com show the badge; caniuse adds per-version tables and known bugs. Wrap anything newer in @supports (@supports).

At build time, purge first, then minify. PurgeCSS deletes rules whose selectors match no word in your HTML, templates and scripts; cssnano, a set of PostCSS 238,379 plugins, strips whitespace, merges rules and shortens values. On a three-element page using Bootstrap 5.3.8 2,007 , PurgeCSS cut bootstrap.css from 33,075 to 2,928 bytes gzipped, and cssnano brought it to 2,711.

MENU