CSSLint已停止维护,不兼容Node.js≥16及现代npm,而Stylelint生态活跃、支持多语法且规则更细;“stylelint-config-recommended”默认启用no-descending-specificity、no-duplicate-selectors等关键语义规则,但不含格式化规则。

CSSLint 和 Stylelint 是当前最实用的两个 CSS Lint 工具,但它们定位不同:CSSLint 更偏重传统 CSS 语义与性能陷阱检测,Stylelint 则覆盖更广(SCSS/PostCSS)、规则更细、生态更活跃。直接上手推荐用 Stylelint,CSSLint 仅在维护老项目或需特定规则(如 box-model 强制校验)时保留。
为什么不能只靠 csslint --version 就算配置成功?
很多用户运行 csslint --version 返回版本号就以为万事大吉,结果执行 csslint style.css 却报错“Cannot find module 'fs'”或静默无输出——这是因为 CSSLint 自 2021 年起已停止维护,其 CLI 严重依赖旧版 Node.js 的内置模块路径逻辑,在 Node.js ≥16 环境下极易崩溃。它不支持 ESM,也不兼容现代 npm 工作流(如 pnpm 或 npm@9+)。真正能稳定跑通的最低 Node.js 版本是 v14.18.0,且必须全局安装(npm install -g csslint),局部安装基本无效。
stylelint 配置中 "extends": "stylelint-config-recommended" 覆盖哪些关键检查?
这个基础配置不是“建议开启”,而是实际禁用了一整类高危写法。它默认启用的规则包括:
-
no-descending-specificity:阻止选择器特异性逐级下降(如先写.btn再写.btn.primary),避免样式覆盖混乱 -
no-duplicate-selectors:同一文件中不允许重复声明相同选择器(哪怕属性不同) -
color-no-invalid-hex:拒绝无效十六进制颜色(如#fg0000) -
font-family-no-missing-generic-family-keyword:强制font-family末尾带serif/sans-serif等兜底关键字 -
declaration-block-no-duplicate-properties:同一条规则内禁止重复属性(如写了两遍display: flex)
注意:stylelint-config-recommended 不包含缩进、空格、分号等格式化规则——那是 prettier 的事。混用时必须加 stylelint-config-prettier 关闭所有格式类规则,否则会冲突。
立即学习“前端免费学习笔记(深入)”;
如何让 Lint 在 pre-commit 阶段真正生效,而不是被绕过?
很多人配了 Husky + lint-staged,却仍能 git commit -m "xxx" --no-verify 绕过。真正生效的关键点有三个:
- 必须在
package.json的lint-staged字段里明确指定 CSS 文件匹配模式:"*.css": ["stylelint --fix", "git add"],不能只写"*.{css,scss}"却漏掉git add - Husky 的 hook 脚本(如
.husky/pre-commit)里不能只调npx lint-staged,要加set -e让任一命令失败即中断提交 - 开发者本地若未安装 Husky(比如用
npm ci重装 node_modules),hook 根本不会注册——必须在文档里写明npm run prepare(含husky install)为必执行步骤
还有一个容易被忽略的事实:Stylelint 默认不检查 @import 引入的外部文件。如果主 CSS 里写了 @import "reset.css",而 reset.css 本身有重复属性,stylelint src/main.css 是完全检测不到的。必须把所有待检文件显式列进命令,或改用 glob:stylelint "src/**/*.css"。
最后提醒一句:CSSLint 的 /* csslint ignore:start */ 注释对 Stylelint 完全无效;反过来,Stylelint 的 /* stylelint-disable */ 也进不了 CSSLint 的解析器。两者注释语法不互通,跨工具迁移时所有内联忽略都得重写。


















