css变量更新本身不触发重排或重绘，仅修改计算样式树键值对，属惰性求值；是否重绘取决于var(--color)是否被有效样式引用及是否进入渲染帧计算，而用于width等布局属性或单位错误则会意外触发重排。
CSS变量更新本身既不直接触发重绘，也不触发重排——它只是修改计算样式树中的一个键值对，浏览器跳过选择器匹配、CSSOM重解析和布局计算，属于惰性求值。
为什么 setProperty('--color', '#f00') 不立即重绘
关键在“var(--color)”是否已被实际使用并参与渲染计算：
- 如果某元素样式中写了
color: var(--color)，且该元素已挂载、可见，那么变量值变更后，下次渲染帧（如 scroll、resize 或 requestAnimationFrame）会重新计算 color 值，并触发该元素的重绘 - 但如果该变量未被任何有效规则引用（比如 CSS 里漏写
var()，或作用域不匹配），即使调用style.setProperty('--color', '#f00')，也完全无视觉反馈 - 变量值变更不改变元素几何属性（宽高、位置、盒模型），因此 layout 阶段被完全绕过 → 不触发重排
什么时候会意外触发重排
看似只改变量，实则间接导致重排的常见场景：
- 变量用于
width、font-size、margin等布局相关属性：例如width: var(--editor-width)，改--editor-width就等于改 width，必然重排 - 变量值带单位错误：如
element.style.setProperty('--size', 16)（缺px），CSS 解析失败，浏览器 fallback 到初始值，可能造成尺寸塌陷或内容重流 - 在 scroll 回调里高频调用
setProperty，且变量被用于transform以外的布局属性 → 浏览器来不及合并，每帧都强制重排
如何验证变量更新是否真生效
别只看 JS 是否执行成功，要确认三件事：
- 变量是否在目标元素的作用域内定义：全局用
document.documentElement.style.setProperty()，局部用el.style.setProperty()，Shadow DOM 需操作shadowRoot.host.style - CSS 规则中是否显式调用：必须有类似
.editor { background-color: var(--bg); }，不能只写:root { --bg: #fff; }就完事 - 值是否带正确单位：数值型变量如
--line-height、--gap必须传字符串'1.5'或'12px'，而非数字1.5
真正容易被忽略的不是“怎么设变量”，而是变量被谁读、在哪算、何时画——它不自动绑定，也不保证实时响应，所有链路都要手动对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
