stylelint 是最主流的 CSS/SCSS/Less 静态代码检查工具，不解析运行时样式，只扫描源码，速度快、准确度高、可定制性强。
用 stylelint 检查 CSS 规范最直接
不装插件、不配构建工具也能跑，stylelint 是目前最主流的 CSS/SCSS/Less 代码检查工具。它不解析运行时样式，只静态扫描源码，所以快、准、可定制性强。
常见错误现象：写完 .btn { margin: 0 auto; } 却没报错，其实漏了 display: block 才能生效——stylelint 不管逻辑对错，只管你写的是否符合规则；真要查这种“无效声明”，得靠浏览器开发者工具或 css-validator。
- 安装命令：
npm install --save-dev stylelint stylelint-config-standard - 基础配置文件
.stylelintrc.json至少包含：{"extends": "stylelint-config-standard"} - 检查单个文件：
npx stylelint "src/**/*.css"（注意引号，避免 shell 展开失败） - 编辑器里实时提示需额外装插件（如 VS Code 的 “Stylelint” 扩展），且确保工作区启用了
stylelint.enable
postcss-reporter 报错信息太模糊？换 --formatter verbose
stylelint 默认输出只显示行号和规则 ID（比如 no-duplicate-selectors），但新人根本不知道这代表什么。直接加参数就能看到人话解释：
- 加
--formatter verbose：输出含规则说明、修复建议、示例代码片段 - 加
--fix自动修复部分问题（如空格、分号、排序），但不会改选择器结构或属性值语义 - 如果报错里出现
Unknown word，大概率是 SCSS 变量或嵌套语法没加载对应插件，要加stylelint-scss并在配置中plugins: ["stylelint-scss"]
为什么 class 命名规则总被忽略？配置里没开 custom-property
像 BEM 或 CSS Modules 这类命名约定，stylelint 默认不检查。必须手动启用 selector-class-pattern 规则，并给正则写清楚边界。
立即学习“前端免费学习笔记（深入）”；
- 想强制
.btn__icon--large这种格式，配置项写："selector-class-pattern": "^([a-z][a-z0-9]*)(__[a-z][a-z0-9]*)?(--[a-z][a-z0-9]*)?$" - 注意：这个正则匹配的是整个类名，不是片段；
.is-active这种状态类会被拦住，得在规则里用ignore: ["consecutive-dashes"]或单独加例外 - 如果项目混用 CSS-in-JS（如 styled-components），
stylelint默认不处理模板字符串里的样式，得配stylelint-processor-styled-components
CI 里 stylelint 偶尔失败？检查 node_modules 和配置继承链
本地跑过、CI 报 Cannot find module 'stylelint-config-standard'，八成是 node_modules 没装全，或配置文件被父目录的 .stylelintrc 覆盖了。
- CI 脚本里别只写
stylelint，显式指定配置：stylelint --config .stylelintrc.json "src/**/*.css" - 用
stylelint --print-config path/to/file.css查看最终生效的完整配置，确认extends和rules是否如预期合并 - 某些规则（如
max-nesting-depth）在 SCSS 中计算嵌套层级时，会把@media和&都算进去，容易误报；真要放宽，改max-nesting-depth: 4比关掉更稳妥
真正麻烦的是规则之间互相打架——比如开了 declaration-block-trailing-semicolon 又开了 value-keyword-case，某些缩写值（border: 1px solid red）可能触发冲突提示。这时候得看 --debug 输出，定位是哪个规则先改了 AST 再被另一个规则校验。
