CSS变量大小写是否敏感？

是，CSS变量名称严格区分大小写，--color与--Color被视为两个不同变量，var(--color)无法获取--Color的值；常见失效原因包括大小写不匹配、中文短横或不可见字符混入，须统一使用kebab-case命名并逐字核对定义与引用。

是，CSS变量（即自定义属性）名称严格区分大小写，--color 和 --Color 是两个完全不同的变量，var(--color) 永远取不到 --Color 的值。

为什么改了变量却没生效？

这是最常遇到的“静默失效”场景：没有报错、控制台不提示、样式也不报红，只是颜色/尺寸/间距看起来没变。

1. --MainColor: #333 定义在 :root 里，但 CSS 中写的是 color: var(--maincolor) —— 大小写不匹配，直接回退到默认值或 inherit
2. JavaScript 动态设置时用了 el.style.setProperty('--BG', 'red')，而 CSS 写的是 background: var(--bg) —— 名称不一致，取值为 invalid
3. 复制粘贴变量名时混入了中文短横 －（U+FF0D）或不可见字符（如零宽空格），肉眼难辨，但浏览器判定为非法标识符

var() 函数中变量名怎么写才安全？

别靠记忆，靠约定 + 工具辅助。大小写敏感通常不是异常，是规范强制要求，所以必须从源头统一风格。

1. 全部使用 kebab-case：推荐 --primary-color，而不是 --primaryColor 或 --PrimaryColor
2. 定义和引用必须逐字一致：包括所有短横、字母大小写、无多余空格 —— 可用开发者工具「Computed」面板查看最终计算值，若显示 invalid 或 fallback 值，大概率是拼写问题
3. VS Code 中开启「Auto Rename Tag」插件对选择器有效，但对 --xxx 变量名不自动同步，仍需手动核对

CSS变量大小写敏感 vs 普通CSS属性不敏感

这个差异容易让人困惑，但设计逻辑很清晰：普通属性如 color、MARGIN 是关键字，浏览器内部做了标准化处理；而 --xxx 是用户定义的标识符，类似 JS 变量名，需要支持语义区分（比如 --sidebar-width 和 --SidebarWidth 可能代表不同含义），也避免未来与标准属性冲突。

真正麻烦的不是规范本身，而是它不报错 —— 错误藏在渲染结果里，而不是控制台中。