CSS变量应统一在:root声明以实现全局复用与动态更新，避免硬编码导致维护困难；var()函数支持运行时读写，fallback需为合法字面量值，局部作用域变量仅影响自身及后代。
var() 函数让值复用成为可能，而不是靠复制粘贴硬编码。
重复样式硬编码导致维护成本飙升
比如主题色 #42b983 在 .header、.button、.card 里各写一次，改颜色就得手动搜三处——漏改一处就视觉不一致。更糟的是，这种重复还常混在不同文件、不同组件里，全局搜索都容易遗漏。
:root 定义 + var() 引用，一次改全链路生效
把通用值集中声明在 :root 里，所有引用它的规则自动响应变化：
-
:root { --primary: #42b983; }—— 全局唯一定义点 -
.button { background-color: var(--primary); }—— 不再写死颜色值 -
.header { color: var(--primary); }—— 同样引用，无需重复
改 --primary 值，所有 var(--primary) 立刻更新，CSS 引擎自动重计算，不依赖构建工具或预处理器。
局部作用域也能复用，但别误用继承覆盖
局部变量（如在 .card 里定义 --card-bg）只影响自身和后代，适合组件内隔离；但要注意：var(--x) 查找是沿 DOM 向上继承的，如果父级没定义而子级又没 fallback，默认值会失效，最终回退到 CSS 初始值（比如 color 变成黑色），不是报错而是静默失败。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：var(--missing-var) 没生效，页面颜色/尺寸突然“消失”或错乱，实际是变量未定义且没设默认值。
安全写法：color: var(--text-color, #333); —— fallback 必须是合法 CSS 值，且不能带单位（如 var(--size, 16px) 是对的，var(--size, 16) 会无效）。
和预处理器变量的本质区别：运行时 vs 编译时
Sass 的 $primary 在编译阶段就被替换成具体值，最终 CSS 里看不到变量痕迹；而 --primary 是真实存在于 CSSOM 中的属性，可通过 JavaScript 动态读写：document.documentElement.style.setProperty('--primary', 'red')，这是硬编码或 Sass 都做不到的。
这意味着：同一份 CSS 文件，能支撑暗色模式切换、用户偏好适配、A/B 测试样式分支——所有这些都不需要发新包，也不依赖服务端渲染。
真正难的不是定义几个--xxx，而是设计变量层级（比如 --color-brand-primary vs --color-ui-accent）、控制作用域泄漏、处理 fallback 降级逻辑，以及和 JS 交互时的性能边界（高频修改触发重排）。这些细节不写进 CSS 规则里，但决定了变量能不能长期稳定用下去。 
