:root 是唯一可靠的全局变量声明位置，必须用于定义所有设计 token，因其特异性高、继承稳定、兼容 Shadow DOM 和 SSR，而 html 或 body 声明会导致覆盖、失效或不继承。
:root 是唯一可靠的全局变量声明位置，不是“可选”，而是必须——所有设计 token（颜色、间距、字体等）只有放在这里，才能被整个文档稳定继承、被 JS 安全读写、在 Shadow DOM 和 SSR 场景下不掉链子。
为什么不能用 html 或 body 声明变量
html 虽然多数时候能用，但特异性是 0,0,1，而 :root 是 0,1,0，同名变量会被后者覆盖；body 更危险：它不向上继承，head 里的样式、@import 的外部文件、甚至某些 all: unset 元素都拿不到变量。更隐蔽的问题是，在 SVG 文档或 Web Components 中，html 根本不匹配，而 :root 仍有效。
常见错误包括：body { --color-primary: red; } 写完发现按钮没变色；或者 html { --size: 16px; } 在 Safari 15.6 下被某个第三方 CSS 覆盖失效。
:root 块该放哪儿、怎么写才不白写
变量必须在首次被引用前解析到，否则 var(--x) 静默回退到初始值（不是报错，很难排查）。
立即学习“前端免费学习笔记（深入）”；
- 把
:root块放在 CSS 文件最顶部，或作为第一个<link rel="stylesheet">加载 - 变量名严格大小写敏感：
--Text和--text是两个变量 - 值必须合法：单位不能丢（
--gap: 1rem✅，--gap: 1❌），多值要用引号包裹（--font-stack: "Inter", sans-serif） - 避免在
:root里嵌套引用未声明变量（--a: var(--b)且--b还没定义），旧版 Safari 会直接跳过整条声明
如何安全使用 var(--x) 并避免“看起来没生效”
var() 不是取值函数，是运行时查找表达式——它只向上找最近的、已注册的、语法正确的定义。失效几乎从不报错，只会回退到属性默认值（比如 margin 变成 0，color 变成 inherit）。
- 务必带 fallback：
color: var(--text-color, #333)，否则变量未定义时样式直接崩 - 拼写必须完全一致：
--spacing-md和var(--spacing-md)中的连字符数量、大小写、单词顺序都不能差 - 不能用于
@media条件或@keyframes关键帧值（部分浏览器限制） - 动态更新只能靠 JS：
document.documentElement.style.setProperty('--primary', '#007bff')，改 CSS 文件本身不会热生效
跨文件共享变量的唯一可靠方式
CSS 没有 import 概念，每个文件作用域隔离。:root 只在当前样式表内注册变量，后加载的 CSS 文件根本看不到前面文件里定义的 --x。
正确做法只有一种：把所有变量集中到一个独立文件（如 variables.css），并确保它作为第一个 <link> 出现在 <head> 里：
:root {
--color-primary: #007bff;
--spacing-md: 1rem;
}
其他样式文件（main.css、components.css）必须排在它后面。别指望 @import 放在末尾能“补救”，它会阻塞后续规则解析，且构建工具常不支持。
最容易被忽略的是：变量不是“写完就全局可用”，而是“在首个解析到它的 :root 块之后，且仅对后续样式生效”。哪怕你写了十遍 :root，只要有一处漏了分号、拼错了名、或加载顺序颠倒，整个主题系统就卡在某一个按钮上不动。
