修改:root中CSS变量不触发重绘，是因为浏览器仅更新计算样式树键值对，不重建CSSOM或触发布局；需通过class切换作用域、设置fallback容错、准确操作document.documentElement三者协同解决。
修改 :root 中的 CSS 变量不触发重绘，是因为浏览器根本没把它当“样式变更”处理
你调用 document.documentElement.style.setProperty('--color-bg', '#1a1a1a')，JS 确实改了值，但浏览器只更新计算样式树里的键值对，不走选择器匹配、不重建 CSSOM、不触发布局计算——它把这事“记下来”，等真正需要渲染时（比如下一帧 scroll、resize 或 getComputedStyle() 调用）才去算。变量变了 ≠ 样式变了，var(--color-bg) 这个表达式本身不是属性值，只是个占位符。
var(--x) 依赖的元素没“动”，浏览器就不重绘
如果一个按钮写的是 background-color: var(--color-bg);，且该按钮已渲染完成、DOM 未变、父级没重排、自身也没被 JS 显式触发重绘（比如改 transform 或 opacity），那即使 --color-bg 已更新，它的 background-color 计算值也不会自动刷新。常见现象是：控制台里 getComputedStyle(btn).backgroundColor 还是旧值，直到手动滚动或触发一次 layout 强制求值。
- 只有当该元素进入渲染帧的样式计算阶段，才会重新展开
var(--color-bg)并参与 color 计算 - 若变量仅用于非布局属性（如
color、background-color），且无其他触发条件，就一直“卡”在旧值 - 用
transition包裹var(--x)无效——CSS 不支持对变量本身做过渡，必须作用于具体属性（如background-color）
为什么加 class 比直接 setProperty 更可靠
给 html 加 data-theme="dark" 或 class="theme-dark"，再配合 .theme-dark :root { --color-bg: #1a1a1a; }，本质是让浏览器重新解析整套 CSS 规则：选择器权重变化 → CSSOM 重建 → 所有依赖 var() 的元素强制重算样式 → 自然触发重绘。这不是“绕过限制”，而是正向利用浏览器样式机制。
- 错误做法：
.theme-dark { --color-bg: #1a1a1a; }—— 这是在.theme-dark元素上设变量，但:root是html，不匹配 - 正确写法必须显式写
.theme-dark :root { --color-bg: #1a1a1a; }，确保作用域和权重都落在根节点 - 服务端预设初始 class（如
<html class="theme-dark">）可避免首屏闪白，因为变量定义随 HTML 一起加载并立即生效
容易被忽略的关键点：作用域、fallback 和单位缺一不可
你以为改了 :root 就万事大吉，其实三个链路常断开：
立即学习“前端免费学习笔记（深入）”；
-
作用域错位：组件内写了
.card { --color-bg: #fff; }，它会覆盖:root的同名变量，子元素读的是.card上的值，不是你 JS 改的那个 -
fallback 失效：写
color: var(--text-primary, #333)，但--text-primary实际值是空字符串或initial，这时 fallback 不触发——var()只在变量未定义或值为unset时才兜底 -
单位缺失：传数字
16给--size，而不是字符串'16px'，CSS 解析失败，回退到默认值，可能引发尺寸塌陷甚至意外重排
