style.setproperty()修改css变量更高效仅适用于高频、批量且需保持层叠逻辑的场景；因其惰性求值，只更新计算样式树键值对，跳过选择器匹配、cssom重解析与布局计算，而直接赋值element.style.xxx会立即触发样式变更并可能强制同步重排。
用 style.setProperty() 修改 CSS 变量比直接赋值 element.style.xxx 更高效，只在**高频、批量、需保持层叠逻辑**的场景下成立；其余情况差异几乎为零，甚至可能因误用反而更慢。
为什么 setProperty('--x', 'val') 不触发同步重排
浏览器把 CSS 变量当作“计算样式树中的键值对”，setProperty() 只更新这个键值，不立即走选择器匹配、CSSOM 重解析、布局计算（reflow）这些流程。真正展开 var(--x) 并参与样式计算，要等到 scroll、resize 或调用 getComputedStyle() 等强制读取时机——也就是惰性求值。
而 element.style.backgroundColor = '#ff0' 会立刻标记该元素样式已变，若后续紧跟着读取 offsetWidth，就会强制同步重排，卡顿风险高。
- 连续改 3 个内联样式：每次都要重新解析整个
style字符串 + 合并计算 - 连续调用 3 次
setProperty()：只是 3 次纯内存键值更新，无解析开销 - 但注意：如果变量被用于
width、font-size这类影响布局的属性，最终仍要 layout——变量本身不省 layout，只省“中间步骤”
为什么直接改 style.xxx 容易破坏样式层叠
element.style.color = 'red' 是最高优先级的内联样式，它会盖掉 :hover、@media、.theme-dark 里所有 color 声明，且子元素无法继承这个“红”，也无法被 calc(var(--color) * 0.8) 复用。
而 element.style.setProperty('--color', 'red') 只是设了一个自定义属性，所有 color: var(--color) 的地方（包括伪类、子组件、动画关键帧）都会响应，且完全遵循 CSS 层叠规则。
- 常见错误：按钮加了
:hover { background-color: var(--bg); }，再用 JS 直接写btn.style.backgroundColor = '#ff0'，悬停时颜色就再也变不回去了 - 正确做法：统一用
var(--bg)，JS 只负责改--bg值，让 CSS 自己决定何时、何处、如何应用 - transition 也只对使用
var()的那条 CSS 规则生效，比如.btn { background-color: var(--bg); transition: background-color .3s; }
为什么全局 setProperty(document.documentElement) 往往是错的
很多人一上来就写 document.documentElement.style.setProperty('--gap', '16px')，以为“改一次，全站生效”。但实际这会让**所有引用 --gap 的元素都重新计算样式**，哪怕它们根本不在视口里。
真正该做的，是按作用域精准控制：
- 变量只在某个卡片组件内生效？直接
cardEl.style.setProperty('--gap', '16px') - 变量定义在
.modal { --z-index: 1000; }里？那就得modalEl.style.setProperty('--z-index', '1050') - 只有定义在
:root且需全站响应（如主题色、字体缩放）时，才动document.documentElement - 用
data-theme="dark"配合[data-theme="dark"] { --text-color: #ddd; }，比全局变量更安全、更易隔离
真正容易被忽略的是：CSS 变量的性能优势，只在「频繁动态更新」时才可测；初始化设一次，style.width 和 setProperty('--w') 没区别。另外，transition: --x .3s 无效，必须把 transition 写在消费该变量的 CSS 规则上——这个细节漏掉，效果就完全出不来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
