是，CSS自定义属性（--开头的变量）名称严格区分大小写，如--color与--Color被视为两个不同变量，var()引用时必须完全一致，否则取值失败或回退默认值。
var() 中的变量名大小写敏感是 CSS 规范强制要求的
CSS 自定义属性（即以 -- 开头的属性）在语法层面被定义为“区分大小写”，这不是浏览器实现差异，而是 W3C 规范明确规定的。这意味着 --color 和 --Color 是两个完全独立的自定义属性，哪怕只差一个大写字母，var(--color) 就永远取不到 --Color 的值。
常见错误现象：改了变量却没生效
你可能遇到这些情况：
- 在
:root里写了--MainColor: #333，但样式里用var(--maincolor)—— 结果 fallback 值生效或直接无效 - JavaScript 动态设置时写成
el.style.setProperty('--BG', 'red')，但 CSS 里写的是var(--bg)—— 完全不匹配 - 复制粘贴变量名时混入中文全角短横、空格或不可见字符，导致看似一样实则不同
为什么设计成大小写敏感？
这和 CSS 普通属性（如 color、margin）的不区分大小写形成对比，原因在于：
- 自定义属性本质是“标识符”而非“关键字”，类似 JavaScript 变量名，需要支持语义化命名（如
--sidebar-widthvs--SidebarWidth表达不同含义） - 避免与未来可能新增的 CSS 标准属性冲突（标准属性名全小写，保留大写空间给用户）
- 级联和继承依赖精确匹配，大小写不敏感会引入歧义，比如
--border和--Border若被当作同一属性，就无法独立控制
实际开发中怎么避坑
最稳妥的做法是统一约定命名风格，并严格执行：
立即学习“前端免费学习笔记（深入）”；
- 全部使用 kebab-case（短横线分隔），例如
--primary-color、--font-size-base，不写--PrimaryColor或--primaryColor - 定义和引用必须一字不差：检查是否误用了中文短横、全角字符、多余空格
- 用开发者工具的“Computed”面板查看元素最终计算出的
var()值，如果显示invalid或 fallback，大概率是大小写/拼写问题 - VS Code 等编辑器可安装 “CSS Peek” 或 “Auto Rename Tag” 插件，但注意它们不会自动校验大小写，仍需人工核对
真正麻烦的不是规范本身，而是大小写错误往往没有报错提示，只默默失效——它藏在视觉结果里，而不是控制台中。
