CSS linting tools will save you precious time in the code review process, and so will the formatters, validators and optimizers that usually sit alongside them. Writing well-structured, optimized CSS by hand is tedious, and spotting mistakes by eye is worse.
This review was first written in 2014, and most of the tools it covered then are no longer maintained. So we've rewritten it around the open source CSS tooling teams use today. There's a short note on what happened to the original list at the end.
1. Stylelint
Stylelint is a dedicated CSS linter that helps you avoid errors and enforce conventions. It has over 100 built-in rules for modern CSS syntax and features, fixes problems automatically where it can, and supports plugins and shareable configs such as stylelint-config-standard.
With community configs and custom syntaxes, it also lints SCSS, Sass and Less, as well as CSS inside HTML, CSS-in-JS and Vue single-file components.
Stylelint dropped its stylistic rules (indentation, spacing and so on) in version 16. The project's view is that pretty printers such as Prettier are now the better way to handle whitespace; if you still want those rules in your linter, the community @stylistic/stylelint-plugin carries them on.
You can scaffold a setup with npm create stylelint@latest, or do it by hand:
// stylelint.config.mjs
/** @type {import('stylelint').Config} */
export default {
extends: ["stylelint-config-standard"],
};
npm add -D stylelint stylelint-config-standard
npx stylelint "**/*.css"
Interaction Mode: Command line, Node.js API and editor extensions (including an official VS Code extension).
More Information: https://stylelint.io/
2. ESLint CSS plugin
Since February 2025, ESLint has been able to lint CSS natively through the official @eslint/css language plugin. If your team already runs ESLint on JavaScript and TypeScript, you can use the same tool and config file for your stylesheets.
Its rule set is smaller than Stylelint's and focused on correctness: invalid properties and at-rules, empty blocks, duplicate imports, unmatchable selectors and so on. It also has a use-baseline rule that flags CSS features that aren't yet Baseline widely available across the core browsers, while allowing most of them inside a matching @supports block. The plugin doesn't do formatting and recommends a formatter like Prettier for that.
It requires ESLint 9.15.0 or later with the flat config format:
npm install eslint @eslint/css -D
// eslint.config.js
import { defineConfig } from "eslint/config";
import css from "@eslint/css";
export default defineConfig([
{
files: ["**/*.css"],
language: "css/css",
plugins: { css },
extends: ["css/recommended"],
},
]);
Interaction Mode: Command line and any editor with ESLint support.
More Information: https://github.com/eslint/css
3. Biome
Biome is a toolchain for web projects, written in Rust, that provides a formatter and a linter you can use from the command line or your editor. CSS is fully supported for parsing, formatting and linting. SCSS support is still in progress.
Biome's CSS lint rules are a smaller set than Stylelint's, and many of them are ports of Stylelint rules. A parser option lets you turn on Tailwind CSS 4 directives, and CSS Modules syntax is enabled automatically for .module.css files. It's worth a look if you'd like one tool for your JavaScript, TypeScript, JSON and CSS.
npm i -D -E @biomejs/biome
npx biome init
npx biome check --write
biome check runs the formatter, linter and assist actions in one pass; biome lint and biome format run them separately.
Interaction Mode: Command line and editor extensions.
More Information: https://biomejs.dev/
4. Prettier
Prettier is an opinionated code formatter that supports CSS, Less and SCSS (plus styled-components and styled-jsx). It isn't a linter. It reprints your stylesheets in one consistent style, which is why it pairs well with Stylelint or ESLint now that those leave whitespace alone.
npm install --save-dev --save-exact prettier
npx prettier . --write
# in CI
npx prettier . --check
Interaction Mode: Command line, API and editor integrations.
More Information: https://prettier.io/
5. W3C CSS Validation Service
The W3C CSS Validation Service is still going strong. You can check CSS, or HTML that contains CSS, by URI, file upload or direct input, against a profile you choose: CSS levels 1 to 3, CSS level 3 + SVG, and SVG, mobile and TV profiles.
It's a validator rather than a linter. It tells you whether your CSS conforms to the specifications, not whether it follows your team's conventions. The validator is open source (w3c/css-validator) and is still being updated for newer CSS such as @scope.
If you'd rather run it locally or in CI, download css-validator.jar from the project's GitHub releases and run it with Java:
java -jar css-validator.jar https://example.com/
Interaction Mode: Direct input, file and URL, plus a command-line version.
More Information: https://jigsaw.w3.org/css-validator/
6. PurgeCSS
Finding unused selectors used to mean a browser add-on crawling your site. Today it's usually done at build time with PurgeCSS. It analyzes your content files (HTML, templates, JavaScript and so on) and your CSS files, matches the selectors, and removes the ones that aren't used. Because it only sees selectors that appear in your content, you can safelist any that must survive, such as classes added at runtime.
It comes as a CLI, a JavaScript API and plugins for PostCSS, webpack, Gulp and Grunt, with guides for frameworks such as Vue, React, Next.js and Nuxt.
npm i -g purgecss
purgecss --css css/app.css --content src/index.html "src/**/*.js" --output build/css/
Interaction Mode: Command line, JavaScript API and build-tool plugins.
More Information: https://purgecss.com/
7. Lightning CSS
Lightning CSS is a CSS parser, transformer, bundler and minifier written in Rust. Beyond minifying, it can add vendor prefixes and lower modern syntax for the browser targets you specify, bundle @import rules, generate source maps and handle CSS Modules.
You may already be using it: Parcel uses it as its default CSS transformer, Vite supports it out of the box as a transformer and minifier, and webpack users can enable it through css-minimizer-webpack-plugin.
npm install --save-dev lightningcss-cli
npx lightningcss --minify --bundle --targets ">= 0.25%" input.css -o output.css
Interaction Mode: Command line, JavaScript and Rust library, bundler integrations.
More Information: https://lightningcss.dev/
8. cssnano
cssnano is a modular CSS minifier built on PostCSS. If your build already runs PostCSS, it slots in as one more plugin and turns your development CSS into compressed production assets.
npm install cssnano postcss --save-dev
// postcss.config.js
module.exports = {
plugins: [
require("cssnano")({
preset: "default",
}),
],
};
A note on clean-css, the Node.js library (not the CleanCSS web tool from our original list): it still works, but its maintainer has put it in maintenance mode, with only occasional bug-fix releases.
Interaction Mode: PostCSS plugin.
More Information: https://cssnano.github.io/cssnano/
9. Browser DevTools
Chrome DevTools has two panels that cover ground the old browser add-ons used to. The CSS Overview panel (still labelled a preview feature) captures a report of a page's CSS: colors, including low-contrast text, fonts, unused declarations and media queries. The Coverage panel shows how much of each stylesheet and script a page actually used, which is a useful sanity check before you configure PurgeCSS.
Open CSS Overview from More tools > CSS overview in the DevTools menu, and Coverage by typing coverage into the Command Menu and selecting Show Coverage.
Interaction Mode: In the browser.
More Information: https://developer.chrome.com/docs/devtools/css-overview
Top comments (0)