是，css变量名称严格区分大小写，--color与--color被视为两个不同变量，var(--color)无法获取--color的值；常见失效原因包括大小写不匹配、中文短横或不可见字符混入，须统一使用kebab-case命名并逐字核对定义与引用。
是，CSS变量（即自定义属性）名称严格区分大小写，--color 和 --Color 是两个完全不同的变量，var(--color) 永远取不到 --Color 的值。
为什么改了变量却没生效？
这是最常遇到的“静默失效”场景：没有报错、控制台不提示、样式也不报红，只是颜色/尺寸/间距看起来没变。
-
--MainColor: #333定义在:root里，但 CSS 中写的是color: var(--maincolor)—— 大小写不匹配，直接回退到默认值或inherit - JavaScript 动态设置时用了
el.style.setProperty('--BG', 'red')，而 CSS 写的是background: var(--bg)—— 名称不一致，取值为invalid - 复制粘贴变量名时混入了中文短横
－（U+FF0D）或不可见字符（如零宽空格），肉眼难辨，但浏览器判定为非法标识符
var() 函数中变量名怎么写才安全？
别靠记忆，靠约定 + 工具辅助。大小写敏感不是 bug，是规范强制要求，所以必须从源头统一风格。
- 全部使用
kebab-case：推荐--primary-color，而不是--primaryColor或--PrimaryColor - 定义和引用必须逐字一致：包括所有短横、字母大小写、无多余空格 —— 可用开发者工具「Computed」面板查看最终计算值，若显示
invalid或 fallback 值，大概率是拼写问题 - VS Code 中开启「Auto Rename Tag」插件对选择器有效，但对
--xxx变量名不自动同步，仍需手动核对
CSS变量大小写敏感 vs 普通CSS属性不敏感
这个差异容易让人困惑，但设计逻辑很清晰：普通属性如 color、MARGIN 是关键字，浏览器内部做了标准化处理；而 --xxx 是用户定义的标识符，类似 JS 变量名，需要支持语义区分（比如 --sidebar-width 和 --SidebarWidth 可能代表不同含义），也避免未来与标准属性冲突。
真正麻烦的不是规范本身，而是它不报错 —— 错误藏在渲染结果里，而不是控制台中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
