css变量名严格区分大小写，--primarycolor、--primarycolor、--primarycolor被视为三个独立变量；拼错大小写会导致静默失效，computed面板不显示、getcomputedstyle返回空字符串，样式回退至initial或inherit。
为什么CSS变量名区分大小写容易导致Bug
因为浏览器把--PrimaryColor、--primarycolor、--primaryColor当成三个完全无关的变量，拼错一个字母或大小写就等于声明了一个新变量，而引用时旧变量根本不存在——整个过程不报错、不警告，只静默失效。
常见大小写错误现象
变量未定义但控制台无提示，Computed 面板里搜不到该变量，getComputedStyle(el).getPropertyValue('--x')返回空字符串；元素样式回退到initial或inherit，比如文字变透明、背景消失、边框颜色为空。
-
:root { --textColor: #333; }定义了小驼峰，但引用写成color: var(--textcolor);→ 失效 -
.card { --BgColor: #f9f9f9; }用了大写B，子元素写background: var(--bgcolor);→ 拿不到值 - 复制粘贴时带了全角短横、中文空格或不可见字符，如
--color‑primary（中间是EN DASH）→ 浏览器直接忽略整行
怎么快速验证大小写是否一致
别靠肉眼比对。打开 DevTools 的 Elements 面板，选中目标元素，在右侧 Styles 面板顶部点 filter 图标，输入变量名（如 textColor），看是否有匹配的定义来源；再切换到 Computed 标签页，展开 “Custom Properties”，逐层向上看祖先节点是否真有那个拼写、那个大小写的变量。
- 用
getComputedStyle(document.documentElement).getPropertyValue('--textColor')查 :root 是否真定义了该拼写 - 在控制台执行
for (let p of getComputedStyle(document.documentElement)) { if (p.startsWith('--')) console.log(p) }列出所有已声明变量，确认是否存在预期名称 - 如果用构建工具（Vite/Webpack），检查 CSS 提取后是否被自动重命名或大小写标准化（极少见，但存在插件干扰）
为什么大小写敏感却没人提醒你
CSS 变量不是语法错误，而是运行时“未定义”——它和 JS 中访问 undefined 属性一样，属于规范允许的行为。浏览器不会抛异常，也不会在 Console 打 warning，只在 Computed 面板里让属性“凭空消失”。最麻烦的是：这种 Bug 在开发环境可能因缓存、热更新顺序偶然“看起来正常”，上线后才集中爆发。
真正难调试的，是变量名大小写不一致 + fallback 值恰好合法（比如 color: var(--textColor, #000)），导致你以为生效了，其实一直走的是兜底色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
