应统一用小写,配 stylelint 的 color-hex-case: "lower" 规则;因 git 将 #fff 与 #fff 视为不同字符串,导致无意义 diff 干扰协作和 ci,需通过配置文件固化规则并集成编辑器与 ci 流程。

统一用小写,配 stylelint 的 color-hex-case 规则,否则 Git diff 会频繁出现无意义变更。
为什么大小写混用是问题?
浏览器完全不关心 #FF0000 还是 #ff0000,但 Git 会把它们当作不同字符串。两个人分别提交 #FFF 和 #fff,diff 里就多出一行“修改”,实际颜色没变——掩盖真实逻辑变更,还干扰自动化比对和 CI 检查。
怎么强制统一为小写?
靠人工盯不住,必须工具链介入:
-
stylelint配置color-hex-case: "lower"(写在.stylelintrc.js或.stylelintrc.json里),保存时自动修正或报错 - VS Code 要确保插件(如 Stylelint)已启用,且文件关联为
css/scss类型,否则规则不生效 - 别只靠 CLI 参数临时跑检查——
stylelint --fix可修复,但必须落地到配置文件才可持续
常见踩坑点
很多人以为“大小写不敏感=可以随便写”,结果掉进协作陷阱:
- 设计稿导出的色值常带大写(如
#E53935),直接复制粘贴就埋下隐患 - Sass 编译器本身不校验大小写,
color-hex-case是stylelint的规则,不是 Sass 内置能力 - PostCSS 插件如
postcss-color-hex-alpha处理的是 8 位 hex(#rrggbbaa),跟大小写无关,别混淆用途
真正麻烦的不是写错一次,而是每次改样式都要手动调大小写、或者等 CI 报错再返工——把规则塞进编辑器和 CI 流程里,比靠人盯靠谱得多。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











