CSS变量名严格区分大小写，--color与--Color是两个独立自定义属性；拼写不一致会导致静默失效，getComputedStyle返回空字符串，样式回退至initial或inherit。
它不是“必须”区分大小写，而是 CSS 规范就把它定义为区分大小写的——--color 和 --Color 就是两个完全独立的自定义属性，就像 JS 中的 foo 和 Foo 一样。
浏览器把 CSS 变量当普通属性处理
CSS 变量本质是“自定义属性”，不是语法糖或宏。浏览器解析时，不识别 -- 后面的内容语义，只按标识符（identifier）规则比对字符串全等。这意味着：
-
--textColor、--textcolor、--TextColor在解析阶段就被视为三个不同 key - 没有隐式转换，不支持 case-insensitive fallback
-
var(--textcolor)查不到--textColor，也不会报错，只会返回空字符串或 fallback 值
为什么设计成这样？历史与兼容性权衡
如果 CSS 变量不区分大小写，会和已有 CSS 属性行为冲突。例如：
- 标准属性如
background-color和BACKGROUND-COLOR是等价的（CSS 不区分大小写） - 但自定义属性若也忽略大小写，就会模糊“声明即存在”的边界：你写了
--BgColor，别人读成--bgcolor，到底算不算同一个？ - 统一用严格字符串匹配，避免歧义，也和 JavaScript 的对象属性、CSSOM 的
getPropertyValue()行为保持一致
实际开发中最容易踩的坑
大小写问题本身不难理解，难的是它静默失效——尤其在多人协作或复制粘贴时：
- 从设计稿或文档里复制变量名，可能带全角短横
－或不可见 Unicode 字符，导致整行被忽略 - 使用 VS Code 的自动补全，但补全项是
--primary-color，你手敲成了--primaryColor，DevTools 里根本搜不到 - fallback 值合法（如
color: var(--textColor, #333)），你以为生效了，其实一直走兜底色 - 构建工具（如 PostCSS 插件）意外重命名变量，但只改小写不报错，上线后样式错乱
真正要盯住的，从来不是“为什么区分大小写”，而是“我当前用的这个拼写，到底有没有在作用域链上真实声明过”。查 getComputedStyle(el).getPropertyValue('--x') 返回值，比肉眼对代码快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
