Stylelint 不能直接检测未命名的颜色硬编码，需借助插件如 stylelint-declaration-strict-value 才能禁止 #fff、rgb() 等值，仅允许 var() 变量；它不自动修复语义，仅校验格式。
Stylelint 能否直接检测未命名的颜色硬编码
不能直接检测。Stylelint 本身没有内置规则叫 no-hardcoded-colors 或类似名称，它不会自动把 #ff0000、rgb(255, 0, 0)、red 这类值标记为“未命名”。它只管语法合法性、拼写、重复、单位、缩进等基础层问题。
但你可以通过组合规则 + 插件实现间接检测：
-
color-no-invalid-hex防止写错十六进制（如#FG0000） -
color-named可强制要求用命名色（如red），但不解决硬编码问题 - 真正起作用的是插件：
stylelint-color-no-hex或stylelint-declaration-strict-value，它们能禁用十六进制/RGB/HSL，只允许变量或自定义属性
如何配置 stylelint-declaration-strict-value 检测颜色硬编码
这是目前最贴近“定位未命名颜色”的工程化方案。它不依赖颜色语义，而是按 CSS 属性名 + 值类型做白名单控制。
安装与配置步骤：
- 运行
npm install stylelint-declaration-strict-value --save-dev - 在
stylelint.config.js中启用插件和规则：
module.exports = {
plugins: ['stylelint-declaration-strict-value'],
rules: {
'plugin/declaration-strict-value': [
['/color/', '/background/', '/border/', '/outline/'],
{
ignoreKeywords: ['transparent', 'currentColor', 'inherit', 'initial', 'unset'],
ignoreFunctions: ['var', 'env'],
ignoreCustomProperties: true
}
]
}
};
效果是：所有匹配 color、background 等属性的声明，若值是 #fff、rgb(0,0,0)、hsl(0,0%,0%)，就会报错；但 var(--text-primary) 或 var(--bg-default) 会被放过。
CSSLint 的 box-model 规则为何和颜色检测无关
很多人搜“CSS 颜色检测”时误点进 CSSLint 文档，结果发现它的 box-model、ids、universal-selector 等规则全在布局和选择器层面，压根不碰颜色值。CSSLint 从 2011 年发布起就没提供任何颜色语义类规则——它连 color-no-invalid-hex 都不支持，更别说识别硬编码了。
如果你看到项目里还在用 csslint 命令检查颜色，基本等于没查。它最多报个 Unknown property 'colr'（拼写错误），对 background: #333 这种完全静默。
结论很明确：CSSLint 不适合做颜色规范化，别在它身上浪费配置时间。
为什么 --fix 不会帮你把 #333 替换成 var(--gray-800)
stylelint --fix 只修格式，不改语义。它能把 color:#333 自动变成 color: #333;（加空格、加分号），但绝不会猜你想用哪个设计系统变量。
真正要落地颜色命名规范，必须分两步走：
- 先用
stylelint-declaration-strict-value把硬编码拦在提交前 - 再靠人工或 codemod 工具批量替换——比如用
jscodeshift写脚本，把#333映射到var(--gray-800)，并确保该变量已在:root或对应 scope 中定义
漏掉第二步，光靠 Lint 工具只会让 CI 卡住，开发卡在“我知道要改，但不知道该改成啥”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
