根本原因是CSS变量变更未触发浏览器重绘，因静态属性依赖的变量值被缓存；需强制重排、绑定class切换主题、媒体查询内完整重定义变量、避免嵌套、用具体属性而非变量名做transition、子应用应隔离根节点或使用命名空间前缀。
为什么 :root 里定义变量后，换主题时样式没更新？
根本原因不是变量没生效，而是你改了 :root 的 CSS 变量值，但浏览器没触发重绘——尤其是当变量只用在静态属性（比如 color、background-color）且父元素没发生布局/样式变更时，它真可能“卡住”不动。
实操建议：
- 改变量后，强制触发一次重排：比如给 body 加个临时
transform: translateZ(0)再立刻移除，或操作一个不影响视觉的伪类（如body::before { content: "theme-update" }） - 更稳妥的做法是把主题切换逻辑和 class 切换绑定：给
html或body加data-theme="dark"类，再用属性选择器写规则，:root变量只作兜底或计算用 - 别在 JS 里反复 setProperty 多个变量——批量改用
document.documentElement.style.cssText += "...";（注意覆盖风险）或用CSSStyleSheet.insertRule注入整套新变量
var(--color-primary) 在 media query 里失效怎么办？
CSS 变量本身不响应媒体查询变化，var() 只是取值，不会“重新求值”。如果你在 @media (prefers-color-scheme: dark) 里改了 :root 的 --color-primary，但组件样式没重算，就容易误以为“失效”。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 深色模式开启后，按钮文字还是浅色——因为按钮用了
color: var(--color-primary);，但该变量在浅色主题下已计算完毕并缓存 - 变量嵌套过深（如
--bg: var(--bg-base); --bg-base: #fff;），导致媒体查询里只改了--bg-base，而--bg没刷新
正确做法：
- 所有主题相关变量，必须在媒体查询内部完整重定义，不要依赖外部默认值
- 避免多层嵌套引用；优先用扁平变量名，比如直接
--color-bg而非--color-bg-layer-1 - 若需动态计算（如
calc(var(--spacing) * 2)），确保参与计算的每个变量都在同一媒体查询块中被声明
JS 修改 :root 变量后，CSS 动画不触发
CSS 动画（transition / @keyframes）对 CSS 变量的支持有限：只有变量最终影响的**可动画属性**（如 background-color、opacity）才会动，变量本身不能被 transition。
使用场景：
- 你想点一下按钮，让整个主题渐变切换（而不是突变）
- 你写了
transition: --color-primary 0.3s ease;—— 这行代码完全无效，浏览器会忽略
解决路径：
- 把动画逻辑交给具体属性：比如
transition: background-color 0.3s, color 0.3s;，然后确保 JS 改变量后，对应元素的这些属性确实发生了变化 - 用
CSS.registerProperty（Chrome 110+）声明带语法和初始值的自定义属性，才能支持 transition；但兼容性差，生产环境慎用 - 更实际的做法：用 JS 配合
getComputedStyle+requestAnimationFrame手动插值，控制变量逐步变化（适合小范围高精度控制）
多个子应用共用 :root 变量时，怎么避免互相污染？
微前端或 iframe 场景下，所有子应用都读写 document.documentElement，一个应用改了 --spacing-xs，另一个就跟着错位——这不是作用域问题，是设计上没隔离。
关键判断：
- 别指望
:root能天然隔离；它就是全局的，和window一样 - 如果子应用有独立样式 scope（比如 Vue 的
scoped或 Shadow DOM），变量仍从 document 继承，无法自动限定
可行方案：
- 每个子应用操作自己专属的根节点：比如给子容器加
id="app-a"，然后用#app-a { --color-primary: red; }，再让组件内样式用color: var(--color-primary)—— 此时变量作用域由选择器决定 - 用 CSS 自定义属性 + 属性继承机制：把变量设在子应用最外层 wrapper 上，而非
:root，所有后代自动继承，且互不干扰 - 构建时注入命名空间前缀（如
--app-a-color-primary），配合 postcss 插件自动转换，运行时零耦合
真正麻烦的从来不是怎么切主题，而是切完之后，某个按钮的边框宽度在某个分辨率下突然变成 0.5px——那大概率是你在某个媒体查询里漏写了 --border-width，或者它被更高优先级的选择器覆盖了，而你还在检查变量名拼错没。
