自定义属性名大小写敏感是css规范强制要求，--primary-color与--primary-color互不相同；拼写错误导致var()静默失效并回退默认值，需统一小写短横线命名、集中声明、收口为常量防错。
自定义属性名大小写敏感是硬性规范
是的，--primary-color 和 --Primary-Color 是两个完全不同的变量，浏览器不会做任何归一化或容错。这不是浏览器差异，而是 CSS 规范明确要求的——声明和使用时大小写必须逐字一致。
常见错误现象：:root { --text-color: #333; } 声明后，在样式里写 color: var(--Text-Color);，结果值为 transparent（因未定义，回退到属性默认值），控制台也不会报错，样式静默失效。
- 所有自定义属性名都以
--开头，后面紧跟的字符区分大小写 -
--bg、--BG、--Bg三者互不干扰，可同时存在 - 即使在同一个选择器内声明多个变体，也必须显式调用对应拼写的那个
命名习惯比工具更能防错
靠 ESLint 或 Stylelint 插件检测拼写错误效果有限——它们无法知道你“本意”想用哪个变量，只能查是否声明过。真正低成本防错的方式是统一命名约定，并严格执行。
- 全部小写 + 短横线分隔：
--font-size-lg✅，避免--FontSizeLg或--font_size_lg - 禁止在变量名中混用大小写或下划线（后者虽语法允许，但易与短横线混淆）
- 模块前缀强制绑定作用域，例如
--card-bg、--dialog-bg，而不是泛泛的--bg - 在
:root下集中声明全局变量，避免分散在组件内部导致查找困难
var() 调用时大小写错误不会报错，但会触发 fallback
var() 函数遇到未声明的变量名时，**不抛异常、不警告、不中断解析**，而是直接跳过，使用该 CSS 属性的初始值（比如 color 的初始值是 inherit，background-color 是 transparent）。
这意味着：.btn { background-color: var(--Bg, #007bff); } 中的 --Bg 拼错，但 fallback 值生效，你可能完全意识不到变量没被读取。
- fallback 只在变量未定义时起作用；若变量已定义但值非法（如
--size: 12; margin: var(--size)px;），则整条声明无效，且无提示 - 调试时可用
getComputedStyle(el).getPropertyValue('--your-var')检查实际值，返回空字符串说明变量未定义或作用域不对 - 不要依赖 fallback “兜底”，它掩盖的是设计意图丢失，不是样式降级
JS 动态操作时大小写错误更隐蔽
通过 element.style.setProperty('--Color', 'red') 设置变量，和用 var(--color) 读取，因大小写不匹配而失效，DOM 中看似设置了，CSS 却不响应。
- JS 字符串拼接变量名极易出错：
`--${theme}Color`若theme = 'dark'得--darkColor，但实际声明的是--dark-color，就断连了 - 建议把变量名收口为常量对象，避免散落字符串：
const CSS_VARS = { TEXT: '--text-color', BG: '--bg-color' }; - 服务端渲染或构建时注入变量值，也要确保 JS 和 CSS 使用同一套命名源，不能一份写小写、一份写驼峰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
