CSS变量修改比直接改style属性性能更高，因其惰性求值、避免内联样式解析开销、支持更可控的层叠与动画，但需注意嵌套计算、拼写错误及兼容性问题。
直接改 style 属性触发重排重绘的开销，远大于只改 CSS 变量。
var() 修改不触发布局计算
CSS 变量本质是“自定义属性”，浏览器在解析时把它当作普通 CSS 属性处理。当你调用 element.style.setProperty('--color', '#ff0')，它只更新该元素的自定义属性值，不会立即触发样式重新计算或布局（reflow）。只有当后续发生样式计算（比如重排、resize、scroll）或强制读取（如 getComputedStyle）时，才按需展开 var(--color) 并参与计算。
- 对比：直接写
element.style.backgroundColor = '#ff0'会立刻标记该元素样式已变，可能触发同步重排（尤其在读取 offsetWidth 等属性前） -
var()是惰性求值——变量变了，但引用它的属性（如background-color: var(--color)）是否要重算，取决于是否进入样式计算流程 - 这种延迟让批量修改多个变量后统一触发一次重排成为可能
避免内联样式的层叠污染与重复解析
频繁设置 style 属性会导致内联样式字符串不断拼接、覆盖，浏览器每次都要重新解析整条 style 字符串，并与 CSSOM 合并计算最终样式。而 CSS 变量只更新一个键值对，不干扰其他属性。
- 例如：
el.style.margin = '12px'; el.style.padding = '8px'; el.style.color = '#333'→ 三次独立解析 + 合并 - 而
el.style.setProperty('--gap', '12px'); el.style.setProperty('--pad', '8px')→ 两次键值更新，样式计算阶段再统一 resolve - 内联样式优先级最高，容易意外覆盖 CSS 文件中精心设计的媒体查询或状态伪类，变量则完全受层叠规则约束，更可控
动画和过渡对 var() 更友好
用 transition: background-color .3s 动画内联背景色，浏览器必须在每一帧都做颜色插值；但若用 background-color: var(--bg); transition: --bg .3s（注意：CSS 变量本身不可直接 transition），实际生效的是其被引用的属性，而现代浏览器（Chrome 99+、Firefox 100+）已支持对部分变量（如 --bg）的硬件加速过渡 —— 前提是它只影响可合成属性（transform、opacity、filter）或通过 will-change 提前声明。
- 真正能
transition的是变量所作用的属性，不是变量本身；但变量让「控制源」和「作用目标」解耦，便于集中管理动画触发逻辑 - 配合
@property（需registerProperty注册）可实现真正可过渡的变量，但目前兼容性有限（仅 Chromium 系） - 没注册
@property时，改--color不会自动过渡，但改完后触发background-color变化，仍可走原有 transition 链路
容易忽略的性能陷阱
别以为用了变量就万事大吉。过度嵌套 var() + calc() 仍会拖慢样式计算，尤其在大量元素上使用时。
-
width: calc(var(--a) + var(--b) * 2)每次重排都要重新解析、查找、计算，比固定值慢 - 变量名拼错（如
var(--praimary-color)）导致回退值被忽略，可能引发意料外的渲染行为 - 在
:root大量定义未使用的变量，虽不直接影响渲染，但会增大 CSSOM 内存占用，尤其在低端设备上 - IE 完全不支持，
@supports (color: var(--t))必须包裹所有依赖变量的规则，否则旧浏览器直接跳过整块样式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
