Stylelint - The best CSS linter

Apr 26, 2021/reviewstoolscss

Stylelint is an open-source unopinionated well-tested configurable CSS linter that helps you avoid errors and enforce conventions in your styles, powered by PostCSS, and inspired by the best features of scss-lint and ESLint.

A linter is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs. You can use a linter with a pretty printer and a validator.

We have many JavaScript code linters, but not so fortunate with CSS when stylelint has been the best and only mature option for years. Its goal is to provide a core set of rules and a pluggable framework that CSS authors can use to enforce their own strategies.

Key features

According to official documentation, stylelint has following key features:

  • Understands the latest CSS syntax (custom properties, level 4 selectors) and CSS-like syntaxes (SCSS, Sass, Less, SugarSS)
  • Can extract embedded styles from HTML, markdown, CSS-in-JS object, and template literals
  • Has over 170 built-in rules to catch errors, apply limits and enforce stylistic conventions
  • Supports plugins so you can create your own rules or make use of plugins written by the community
  • Automatically fixes the majority of stylistic violations
  • Flexible integrations including standalone CLI, Node.js API, PostCSS plugin, editors’ plugins, task runners’ plugins, or even git hook.

Built-in rules

Stylelint has a rich set of built-in rules that apply to standard CSS syntax only, many of them can be automatically fixed where possible. In contrast to community plugin might support a particular methodology or toolset, or apply to non-standard constructs and features, or be for specific use cases.

All built-in rules are grouped first by the following categories:

  • Detect possible errors: Provide rules to catch code that is valid but likely has unintended consequences (invalid hex colors, duplicate font family names, invalid named grid areas, unknown units, unknown properties, empty blocks, etc.)
  • Limit language features: Provide rules to limit what language features can be used to enforce (value notation, hex colors, font weights, allowed functions, allowed URL schemes, value units, etc.)
  • Enforce stylistic conventions: Provide rules to enforce a diverse range of stylistic convention including whitespace, case, quotes (lowercase or uppercase for hex colors, trailing zeros in numbers, double quotes around strings, etc.)