CSS变量在批量更新共享设计系统变量时更快，因仅需更新键值对且作用域穿透；单次局部变更用class更轻量，因其无解析开销且可能跳过重绘。
不是所有场景都更低——CSS变量在主题切换、高频动态更新时性能更好，但单纯改一个按钮颜色，用class反而更快。
什么时候CSS变量确实更快？
当你要批量更新多个组件的样式，且这些组件共享同一套设计系统变量（比如--color-primary、--spacing-md）时。浏览器只需更新几个键值对，不用重新匹配成百上千条CSS规则。
-
document.documentElement.style.setProperty('--color-primary', '#5a3')→ 更新1个变量，触发一次样式重计算 - 等价的class切换：
document.documentElement.classList.toggle('theme-dark')→ 浏览器要重新执行所有.theme-dark .btn、.theme-dark .card等选择器匹配，规则越多越慢 - 尤其在有Portal渲染的组件（如Tooltip、Modal挂载到
body末尾）中，class切换可能漏掉某些节点，而变量作用域天然穿透，更可靠
为什么改class有时反而更轻量？
单次、低频、局部样式变更时，class是纯声明式操作，不涉及运行时计算。浏览器只做两件事：加/删class名 + 检查是否有新匹配规则。没有变量解析、作用域查找、calc()展开这些开销。
- 比如只给一个按钮加
is-loading状态：btnEl.classList.add('is-loading')比btnEl.style.setProperty('--state', 'loading')更直接 - 如果对应class只有一条规则（如
.is-loading { opacity: 0.6; }），浏览器连重绘都可能跳过，只走合成层更新 - 注意：若该class里用了
var(--x)且--x刚被改过，反而会多一次样式重计算——变量不是“免费”的
容易被忽略的性能陷阱
CSS变量的性能优势是有条件的，不是无脑替换就能赢。真正卡顿往往出在你没意识到的地方。
立即学习“前端免费学习笔记（深入）”；
- 在循环里反复调用
getComputedStyle(el).backgroundColor→ 每次都强制同步布局，哪怕背后是var(--bg) - 写
.modal .header .title { color: var(--text-color); }这种深选择器 → 变量查找+选择器匹配双重开销，比扁平class慢得多 - 滥用
calc(var(--size) * 1.2)→ 浏览器无法静态折叠，每次都要实时算，100个元素就拖慢10ms+ - 全局改
:root变量 → 所有引用它的元素全量重算样式，不如直接改局部el.style.setProperty
变量快，是因为它把“计算”推迟到了真正需要的时候；但如果你主动去读、去嵌套、去穿透深层DOM，延迟就没了，还搭上额外开销。别迷信变量，要看它怎么被用。
