CSS变量需定义在:root才全局生效，fallback保障容错，语义化命名、单位一致及团队共识是维护关键。
直接改 :root 里的变量值，就能批量更新所有用到它的样式——这是 CSS 变量提升可维护性的最核心事实。不需要 JS、不依赖构建工具，原生支持，改一处，全链路生效。
定义变量必须放在 :root 才能全局复用
很多人把变量写在某个 class 里，结果发现其他地方 var(--color) 拿不到值。根本原因是作用域没理清：
-
:root是文档根元素（等价于html），定义在这里的变量才真正“全局可见” - 写在
.header或body里属于局部变量，只对后代元素有效，且容易被意外覆盖 - 如果项目用到了 Shadow DOM，
:root不会穿透进去，得在 shadow root 内单独定义
var() 的 fallback 值不是可有可无的容错机制
写 color: var(--text-color, #333) 看似只是加个兜底，实际影响很大：
- 当变量未定义或拼写错误（比如写成
--text-colour）时，浏览器直接使用 fallback，不会报错也不会警告 - 在主题切换场景中，fallback 往往是默认主题色，可能掩盖了变量未正确注入的问题
- 嵌套使用时（如
var(--primary, var(--fallback))），第二层 fallback 必须是合法 CSS 值，否则整个声明失效
变量名要带语义，别用 --c1 --s2 这类缩写
维护性差的根源常藏在命名里：
立即学习“前端免费学习笔记（深入）”；
-
--primary-color比--c1明确得多，别人接手时不用猜这个颜色用在哪、是否支持暗色模式 - 推荐按用途分组前缀：
--spacing-、--radius-、--z-（层级）、--easing-（动效） - 避免纯数值命名，比如
--size-16—— 一旦字号调整为 18px，这个变量名就失去意义
计算和级联要小心，calc() 里嵌 var() 容易出隐性错误
下面这段看着没问题，但运行时可能失效：
body {
--base: 16px;
font-size: calc(var(--base) * 1.25);
}问题在于：calc() 要求单位一致，var(--base) 如果被 JS 改成无单位数字（比如 16 而非 16px），整个 calc 就会计算失败，font-size 回退到浏览器默认值。
- 确保变量值始终带单位，或统一用
rem/em等相对单位定义基础值 - 级联时注意优先级：子元素重定义
--primary-color后，父元素里写的var(--primary-color)不会受影响，只有子树内才走新值 - 调试时用浏览器 DevTools 的“Computed”面板看变量最终解析值，比肉眼检查 CSS 更可靠
真正难的不是学会怎么写 --xxx 和 var()，而是让整个团队对变量命名、分层、注入时机达成共识——否则变量越多，混乱越快。一个没文档的 :root 区块，比一堆硬编码还难维护。
