Lint styles with one shared config

How to do it

Put each limit from this playbook in the config once, such as the cap in Cap selector specificity. Run the linter with a zero-warning limit in the same script as the tests, as Check every rule in code requires. Editors and AI agents read the same file, so they get the same answer as the build.

Examples

Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

JSON example

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "selector-max-specificity": "0,2,0",
    "selector-max-id": 0,
    "selector-class-pattern": "^[a-z]+(-[a-z0-9]+)*$",
    "declaration-no-important": true
  }
}

JSON example 2

{
  "scripts": {
    "lint:css": "stylelint \"styles/**/*.css\" --max-warnings 0",
    "build": "npm run lint:css && vite build"
  }
}

CSS example

/* Planted on purpose to prove the gate works. The build must stop. */
#header { }

How to check

The repository has exactly 1 style linter config. The build runs the linter with a warning limit of 0, and the build fails when you add #header { } to any stylesheet.

Related rules

• Cap selector specificity in HTML and CSS
• Use one naming pattern for every class in HTML and CSS
• Check every rule in code in Engineering