CSS Custom Properties本身不触发重绘或回流，关键看变量最终影响的CSS属性：影响transform/opacity等则安全，影响width/margin等则触发回流。
CSS Custom Properties（即 --my-var）本身不直接触发重绘或回流，但它的使用方式会间接引发——关键不在变量定义，而在变量被用在哪些 CSS 属性上、以及 JS 如何读写它。
为什么改 --my-var 有时会重排，有时不会
变量只是占位符，最终生效的是它被 var(--my-var) 替换后的值所作用的属性。比如：
-
background-color: var(--bg);→ 改--bg只触发重绘（安全） -
width: calc(var(--w) * 1px);→ 改--w触发回流（危险） -
transform: translateX(var(--x));→ 改--x不触发回流/重绘（最优，走合成层）
浏览器不会因为“用了变量”就重排；它只看最终计算出的属性是否属于布局敏感型。所以判断依据永远是：变量落地后影响了哪个 CSS 属性。
JS 动态设置 --my-var 的坑点
用 element.style.setProperty('--color', 'red') 看似干净，但若该变量用于 margin 或 font-size，仍会回流。更隐蔽的问题是：
立即学习“前端免费学习笔记（深入）”；
- 在
requestAnimationFrame外频繁调用setProperty，可能被打散成多次样式更新 - 读取
getComputedStyle(element).getPropertyValue('--x')不触发回流，但若紧接着读offsetHeight，浏览器会强制 flush 队列并回流 - 把变量绑在根元素
:root上全局修改，可能让几十个组件同时响应并各自回流
安全使用 CSS Custom Properties 的实操建议
目标不是“不用变量”，而是让变量只驱动非布局属性，或配合硬件加速路径：
- 优先绑定到
transform、opacity、filter、background-color等低开销属性 - 避免绑定到
width、height、margin、top、font-size等高开销属性 - 动画场景下，给元素加
will-change: transform（仅当真需要时），再通过变量控制translate值 - 批量更新多个变量时，用
element.style.cssText = '--a:1; --b:2; --c:3;'替代多次setProperty，减少样式系统解析次数
最易被忽略的一点：变量名本身没性能差异，但变量的“作用域链”有。把一个频繁变化的 --progress 放在深层嵌套组件的局部 style 上，比放在 :root 中更可控——回流影响范围小，也更容易被浏览器优化掉冗余计算。
