CSS变量名称区分大小写是W3C规范明确规定的，--PrimaryColor与--primarycolor被视为两个独立变量；拼写不一致会导致var()失效，常见于大小写、下划线、空格或全角符号错误；变量作用域依赖CSS继承机制，:root定义全局可用，局部定义仅限后代；备用值var(--x, red)仅在变量未定义或值语法无效时生效，initial/unset/空字符串不触发回退；变量值在渲染前动态计算，支持响应式与JS修改，但无法用于@supports或条件逻辑判断。
为什么CSS变量名称区分大小写
CSS变量（即自定义属性）的名称区分大小写，是W3C规范明确规定的——--PrimaryColor 和 --primarycolor 是两个完全独立的变量，浏览器不会做任何归一化或容错匹配。
拼写不一致导致var()失效的典型表现
当你看到样式“突然不生效”，尤其是 border、color、background 这类依赖 var() 的属性没反应，第一直觉该检查变量名是否完全一致。常见现象包括：
-
var(--text-color)引用时写成var(--Text-Color)或var(--text_color)→ 返回无效值，触发回退（如果有）或使用默认值 - 在
:root里定义--bg，却在组件里写var(--BG)→ 查不到，计算结果为invalid - 复制粘贴时多一个空格或全角破折号（如 — 而非 -）→ 语法错误，整个声明被忽略
:root 里定义但子元素拿不到值？先看作用域和继承链
变量本身不“自动全局”，它的“可用性”取决于 CSS 继承机制：
-
--foo写在:root中 → 所有元素都能通过var(--foo)访问（因为继承自根） -
--foo写在.card选择器内 → 只有该元素及其后代能继承并使用它；兄弟元素、父元素、其他路径下的元素都访问不到 - 继承不是“拷贝”，而是运行时动态查找：浏览器在计算某个元素的
var(--x)时，会沿着祖先链向上找第一个定义了--x的规则，找不到就视为未定义
备用值 var(--x, red) 不总是兜底成功
var(--missing, red) 看似保险，但实际触发条件比想象中窄：
立即学习“前端免费学习笔记（深入）”；
- 仅当
--missing**未定义** 或 **定义但值为语法无效**（如--missing: 12px 12px;用于color）时，才用red - 如果
--missing被定义为initial、unset或空字符串""，某些浏览器仍视其为“已定义”，不触发回退 - 注意：
var(--x, calc(1em + 1px))合法，但var(--x, linear-gradient(...))在部分旧浏览器中可能因解析失败而静默失效
真正容易被忽略的点不在命名本身，而在「计算时机」：变量值直到渲染前最后一刻才展开，所以它能响应 @media、:hover、JS 修改，但也意味着你不能在 @supports 或 calc() 外部对变量做逻辑判断——比如没法写 if (var(--enabled)) { ... }。
