建议统一用小写十六进制值,因大小写混用会增加Git diff噪声、干扰PR审查、加重正则匹配负担、触发stylelint警告、降低压缩效率、导致主题色提取遗漏、绕过PostCSS normalize逻辑,并混淆开发者对CSS大小写敏感规则的认知。

为什么CSS中建议统一用小写十六进制值
不是因为浏览器不认大写——#FF0000 和 #ff0000 渲染完全一样;而是因为大小写混用会在协作、工具链和长期维护中悄悄引入问题。
Git diff 里无意义的变更会变多
当两个人分别提交 #FF6B35 和 #ff6b35,Git 会当作两行不同内容记录。这导致:
- PR 审查时干扰重点,真正改了颜色逻辑的变更被淹没在大小写抖动里
- 自动化脚本(如 color extractor)靠正则匹配
#([a-f0-9]{6}|[a-f0-9]{3})时,若写成[a-fA-F]就多一层容错负担 - CI 流水线里 stylelint 默认规则报
color-hex-case: "lower"warning,不修复就过不了 lint 阶段
构建工具和压缩器对大小写敏感但不智能
多数 CSS 压缩器(如 cssnano)不会把 #FF0000 自动转成 #ff0000,也不会合并大小写不同的等价值。结果是:
- 压缩后仍保留大写,白白多占字节(
#FF0000比#ff0000多 0 字节?不,ASCII 中F和f都是 1 字节,但统一小写能提升 gzip 重复模式识别率) - 某些老旧构建插件在提取主题色时硬编码了小写正则,遇到
#F0F就漏掉 - PostCSS 插件如
postcss-color-mod-function内部 normalize 步骤默认按小写处理,大写可能绕过转换逻辑
和 CSS 其他大小写敏感项边界模糊
CSS 本身有真正在意大小写的部分,比如:
立即学习“前端免费学习笔记(深入)”;
- ID 选择器:
div#MyId和div#myid在 XHTML 或 strict DOCTYPE 下不等价 - 自定义属性:
--mainColor和--maincolor是两个不同变量 - 字体名引号内:macOS 上
font-family: "Helvetica Neue"大小写错一位可能 fallback 到 serif
如果颜色值也混用大小写,团队新人容易误以为 #FF0000 和 --primary-color: #ff0000 的大小写规则是一致的,实际却不是——这种认知偏差比多敲几个小写字母更难调试。


















