CSS变量本身不减少重绘，仅当配合will-change、图层提升及慎用属性（如color而非width）时才高效；需避免伪类覆盖、组件级重复声明，并通过间接映射实现transition。
为什么修改CSS变量不会触发重绘
直接改 --primary-color 这类自定义属性，浏览器只标记对应元素的「样式计算」需重新运行，但不会触发布局（reflow）或重绘（repaint）——前提是这些变量只用在 color、background-color、opacity 等合成层友好的属性上。一旦变量被用于 width、margin 或 font-size，就会强制触发 layout，进而连带 repaint。
CSS变量必须配合 will-change 或图层提升才真正高效
光靠变量本身不减少重绘，关键得让目标元素提前进入独立图层。否则即使只改 transform 变量，浏览器仍可能在主线程做 paint。
- 对频繁动画的元素加
will-change: transform（仅限必要时，避免滥用） - 或强制创建图层：
transform: translateZ(0)/opacity: 0.999 - 验证是否生效：Chrome DevTools → Rendering → 勾选「Layers Borders」，看元素是否有独立边框
大型项目中变量命名和作用域容易引发隐式重计算
全局声明 :root { --spacing-xs: 4px; } 没问题，但若在组件级 selector 里反复覆盖同一变量：.card { --spacing-xs: 8px; }，每次切换 class 都会触发整棵子树的样式重新计算，尤其嵌套深时开销明显。
- 优先用
data-theme切换整套变量，而非单个组件覆盖 - 避免在伪类（如
:hover）中声明变量，它会让状态切换变成 full style recalc - 用
CSS.supports('(--var: 0)')检测运行时支持，别在不支持的旧浏览器里 fallback 到 JS 动态写 style
变量 + transition 的组合有隐藏陷阱
transition: background-color 0.2s 能平滑过渡，但 transition: --bg-color 0.2s 是无效写法 —— CSS 不支持直接 transition 自定义属性。必须靠间接映射：
立即学习“前端免费学习笔记（深入）”；
.btn {
--bg-hue: 200;
background: hsl(var(--bg-hue), 70%, 60%);
transition: background 0.2s;
}
.btn:hover {
--bg-hue: 220;
}
注意：hsl() 中的 hue 变化是线性可插值的，换成 rgb() 或十六进制就无法过渡；另外 Safari 对变量内联函数的支持仍不稳定，生产环境建议加 @supports 降级。
