CSS变量名必须严格区分大小写，因W3C规范将其定义为标识符而非关键字，--TextColor、--textcolor、--TEXT-COLOR互不等价；大小写错误不会报错，仅静默失效，需靠统一命名规范（如kebab-case）、源码复用和工具校验来规避。
为什么CSS变量名必须严格匹配大小写
CSS变量（即自定义属性）的名称是W3C规范强制要求区分大小写的，不是浏览器bug或兼容性差异。这意味着--TextColor、--textcolor、--TEXT-COLOR在解析时被当作三个完全独立的属性，彼此无法互换或 fallback。
普通CSS属性不区分大小写，但自定义属性必须区分
这是设计层面的有意区分：
- 普通属性如
color、margin-top属于“关键字”，CSS规范将其定义为ASCII case-insensitive，方便书写容错 - 自定义属性本质是“标识符”（identifier），类似JavaScript变量名或HTML
id，需要支持语义化命名和避免冲突——比如--sidebar-width和--SidebarWidth可能代表不同含义 - 全小写的CSS标准属性已预留命名空间；允许大写字母可防止未来新增标准属性时意外覆盖用户定义的变量
- 级联与继承依赖精确字符串匹配；若大小写模糊，
--border和--Border就无法被独立设置，破坏样式可控性
大小写错误不会报错，只默默失效
这是最危险的一点：浏览器不会在控制台报错，也不会警告，var(--MainColor)引用一个不存在的--MainColor时，只会回退到默认值（如果有）或让该CSS声明无效（例如color: var(--MainColor)变成color: inherit）。
常见静默失效场景包括：
立即学习“前端免费学习笔记（深入）”；
- 复制粘贴时混入中文短横
－或全角空格，肉眼难辨但解析失败 - JS动态设置用
el.style.setProperty('--BgColor', 'red')，但CSS里写var(--bgcolor) - 编辑器自动补全提示了
--primary-color，你手快改成--Primary-Color，结果没生效
验证方式：打开开发者工具 → “Computed”面板 → 找到对应属性，看var(...)展开后是否显示具体值；若显示invalid或直接为空，大概率是大小写/拼写问题。
实际项目中怎么守住这条线
靠规范，不靠记忆：
- 团队统一采用
kebab-case（全小写+短横分隔），禁用PascalCase和camelCase，例如只用--font-size-base，不用--fontSizeBase或--FontSizeBase - 所有定义和引用必须从同一份源复制，禁止手动重敲变量名
- CI流程中可加简单校验脚本，扫描
:root里所有--*定义，再反查全文var(--*)调用是否全部存在且大小写一致 - VS Code中启用“CSS Peek”插件能跳转定义，但它不校验大小写——最终还得人工对齐
真正棘手的从来不是规则本身，而是它不发声：出问题时，你得自己意识到「是不是变量名又差了半个字母」。
