CSS变量必须在:root中定义，因其是文档继承链顶端的唯一根节点，确保所有后代元素（含SVG、伪元素）无条件继承；html或body声明会导致作用域残缺、覆盖风险及SSR闪动，且var()必须带fallback以防未定义时退化失效。
CSS变量必须在 :root 中定义，否则子应用根本读不到——这不是兼容性问题，是继承链断裂的必然结果。
为什么 :root 是唯一可靠位置
所有 CSS 自定义属性靠继承传播，而 :root 对应 html 元素，是整个文档的继承根节点。写成 html 或 body 看似差不多，但实际有隐患：
-
html选择器权重低，容易被第三方库（比如 Ant Design 的.ant-btn）或更高优先级规则覆盖 -
body下声明的变量，dialog、popup或某些 Shadow DOM 子树可能无法继承 - 服务端渲染（SSR）时，若变量不在
:root，首屏 HTML 不会包含计算后的值，导致样式闪动或错乱
var() 调用必须带 fallback
变量未定义、拼写错误、或 JS 动态删除后，var(--color-primary) 不会报错，而是退化为属性默认值（如 color 变成 inherit）。这不是 bug，是规范行为。
- 显式写 fallback：
color: var(--text-color, #333); - 避免嵌套 fallback：
var(--text-color, var(--fallback-color))—— 部分旧版 Safari 不支持 - 组件库中尤其要加 fallback，因为消费者可能没引入变量文件
主题切换别用 setProperty 挨个改
用 JS 遍历所有变量、挨个调用 document.documentElement.style.setProperty('--xxx', '') 表面直观，实际问题密集：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 触发多次重排重绘，性能差
- 无法利用 CSS 级联优先级做局部覆盖（比如某个弹窗强制浅色背景）
- localStorage 持久化后，页面加载时 JS 还没执行，变量仍是默认值，造成首屏错乱
正确做法是预设好主题 class，例如：<html class="theme-dark">，再用 CSS 规则覆盖：.theme-dark { --bg-color: #1a1a1a; }。
微前端里变量共享最容易被忽略的点
变量本身不解决跨技术栈同步问题。如果子应用用 Vue，主应用用 React，CSS 变量虽能读取，但主题状态变更通知机制必须额外设计——不能只靠 :root 声明就认为“自动同步”了。Redux Thunk 或自定义事件（如 theme-change）仍是必要 glue code；另外，Shadow DOM 内部需手动透传变量，或通过 inherit / initial 显式继承，否则变量不会自动穿透。
