CSS自定义属性严格区分大小写，--primary-color与--primaryColor是两个不同变量，var(--primaryColor)无法获取--primary-color的值，因浏览器不自动转换或忽略大小写差异。
--primary-color 和 --primaryColor 是两个完全不同的变量，浏览器不会自动转换或忽略大小写差异。
为什么 var(--primaryColor) 拿不到 --primary-color 的值
CSS 自定义属性（即 CSS 变量）的名称是严格区分大小写的。这和 JavaScript 变量规则一致，但比 HTML class 名更“零容忍”——连一个字母大小写错位，就等于访问一个未声明的新变量。
-
--PrimaryColor、--primarycolor、--primary-color三者互不等价，彼此不可 fallback 或继承 - 父元素定义了
--primary-color: blue，子元素写color: var(--primaryColor)，结果是color: unset（最终退为初始值，如color: black） - DevTools 的 “Computed” 面板里查不到该变量值，且 “Custom Properties” 列表中不会显示拼错的变量名
常见踩坑场景：构建工具 + 动态变量名
当用 JS 动态拼接变量名（比如 const name = `--${theme}-color`），或通过 CSS Modules、PostCSS 插件生成变量时，大小写不一致会直接导致运行时静默失效。
- Vue 模板中
:style="{ color: `var(--${variant}-text)` }"，若variant是'Dark'，生成的是var(--Dark-text)，但全局只定义了--dark-text→ 失效 - Webpack + postcss-custom-properties 插件在压缩阶段可能对变量名做规范化（如全小写），但若原始源码中混用大小写，插件行为不可靠
- 复制粘贴变量名时，容易从设计稿或文档中带入全角字符、不可见空格或中文破折号（如 — 而非 -）
如何快速验证变量名是否匹配
别靠肉眼比对，用 DevTools 直接查真实声明链：
- 右键目标元素 → “检查”，在 Elements 面板中选中该节点
- 切换到 Styles 面板 → 展开 “Custom Properties” → 点击三角箭头逐层向上看祖先节点是否声明了你写的**确切拼写**的变量
- 如果某层写了
--COLOR-PRIMARY，而你引用var(--color-primary)，它不会 fallback，也不会报错，只会跳过 - 临时加个 fallback 测试：
color: var(--primary-color, red)；如果显示 red，说明变量名没找到
大小写错误最难调试，因为它既不报错，也不警告，只是让样式“安静地消失”。最稳妥的做法是：团队约定全部小写 + 连字符（kebab-case），并在 ESLint / Stylelint 中配置 custom-property-pattern 规则强制校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
