:root是规范强制的全局css变量唯一声明位置，因其为继承链不可绕过的起点，能保障svg/xml兼容、避免表单控件继承断裂，而html/body声明存在优先级、继承稳定性及上下文适配缺陷。
:root 是唯一能真正覆盖全文档的声明位置，不是“推荐”，是规范强制要求。 其他地方写 --color-primary，哪怕在 html 上，都可能在 <input>、<button></button> 或 Shadow DOM 里失效。
为什么不能用 html 或 body 声明变量
浏览器对继承的处理有细微差别：:root 被规范定义为“强制继承锚点”，而 html 只是普通标签选择器（特异性 0,0,1），:root 是伪类（0,1,0），优先级更高；更重要的是：
-
body { --bg: white; }→自身、<input>、<select></select>等表单控件根本不会继承它 -
html { --text: #333; }→ 在 SSR 渲染或某些 polyfill 场景下，继承链可能断裂，尤其当 JS 动态挂载子树时 -
:root还兼容 SVG、XML 文档上下文，html完全不适用
:root[data-theme="dark"] 覆盖必须满足的三个硬性条件
主题切换不是写两个 :root 块就完事。生效依赖三件事同时成立：
- 所有变量必须在默认
:root中完整声明（哪怕深色模式下值相同，--shadow-sm也不能漏） - 覆盖块必须用属性选择器：
:root[data-theme="dark"]，不能写成.dark :root（:root永远没有父元素） - JS 切换必须调用
document.documentElement.setAttribute('data-theme', 'dark')，用className会清掉其他 class（比如 SSR 标记或 A/B 测试 class）
var(--x) 静默失效的真正原因
浏览器从不报错，只 fallback 到属性默认值（color 变成 inherit，margin 变成 0），排查最常卡在这三点：
- 拼写或大小写错误：
--SpacingMD和--spacing-md是两个变量 - 声明顺序错：CSS 文件里
.card { color: var(--text); }出现在:root块之前 → 渲染时变量未定义 - 值非法：
--size: 1rem * 2错误（CSS 不支持裸运算），应写成--size: 2rem或--size: calc(1rem * 2) - 最关键却最易忽略：
var(--x, #fff)的 fallback 必须写实；不写 fallback，变量一没定义，样式就崩，控制台毫无提示
真正难的不是写对语法，而是理解 CSS 自定义属性本质是“继承链上的运行时查找”——:root 是这条链唯一不可绕过的起点，漏一个声明、错一次顺序、少一个 fallback，都可能在某个表单控件或动态组件里突然失效，且毫无征兆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
