:root 是唯一可靠挂载全局 CSS 变量的位置，因其语义正确、跨文档兼容、层叠优先且主题切换稳定；错误使用 html 或 body 会导致继承失效、覆盖风险或作用域受限。
:root 是唯一可靠挂载全局 CSS 变量的位置，不是“可选方案”，而是设计系统落地的基础设施。用错地方（比如 html 或 body）会导致变量在部分浏览器中不可继承、主题切换失效、或被第三方组件意外覆盖。
为什么必须写 :root，而不是 html
虽然 html 和 :root 在 HTML 文档中都匹配根元素，但规范明确要求：自定义属性的全局作用域应由 :root 提供。它的特异性（0-1-0）与 html 相同，但层叠顺序更靠前——尤其当 JS 动态设置 style 属性或使用 !important 时，:root 声明的变量更稳定。
- 写
html { --color-primary: blue; }能用，但语义弱、跨文档（如 SVG 嵌入）时可能不生效 - 写
body { --color-primary: red; }是严重错误：变量只在body及其后代生效，中的<style></style>或@keyframes无法访问 - 漏掉
:root外层包裹，直接写--color-primary: blue;—— 浏览器静默忽略整行
:root 里变量怎么命名才不翻车
命名不是风格问题，而是作用域和维护成本问题。CSS 变量不校验拼写、不报错，写错就静默失效。
- 必须以
--开头，如--primary-color；写成primary-color或$primary无效 - 推荐语义化 + 原子化组合：用
--color-brand-primary而非--brand-blue，避免颜色值变更后名不副实 - 避免嵌套引用：
--bg: var(--color-white);在旧版 Safari 中可能解析失败，应直接赋值--bg: #fff; - 大小写敏感：
var(--PrimaryColor)≠var(--primary-color)
如何让 var(--x) 真正安全地用起来
var() 不是函数调用，是 CSS 层叠过程中的字符串替换。它没有运行时检查，出错就丢弃整条声明。
立即学习“前端免费学习笔记（深入）”；
- 回退值不是“锦上添花”：
color: var(--text-primary);风险极高；必须写color: var(--text-primary, #333); - 回退值必须合法且类型兼容：
font-size: var(--size, bold);会失效，因为bold不是长度单位 - 伪元素中需显式继承：
::before { color: var(--text-primary, #333); }，不能依赖父级自动传递 - 动画里引用变量要确保定义在
@keyframes外部，且在动画触发前已加载
主题切换别堆 @media，用 data-theme 统一收口
把暗色模式逻辑塞进 @media (prefers-color-scheme: dark) { :root { ... } } 看似简洁，实际埋下三颗雷：首次渲染取值不准、无法响应用户手动切换、与 JS 主题控制逻辑冲突。
- 正确做法是定义多组
:root规则：:root { --bg: #fff; }，:root[data-theme="dark"] { --bg: #1a1a1a; } - JS 切换时用
document.documentElement.setAttribute('data-theme', 'dark')，别动className，避免清掉 SSR 或 A/B 测试 class - 不要在 JS 里逐个
setProperty修改几十个变量——性能差、难维护；用 class 控制整组变量才是正解 - 动画无法
transition: --bg，得靠@property（仅 Chromium 系支持）或间接过渡原生属性（如background-color）
真正容易被忽略的是：变量一旦在某个选择器中被重定义（哪怕只是 .card { --primary-color: red; }），所有后代都会读到这个红色——这不是 bug，是 CSS 继承机制的设计使然。所以全局变量的“全局性”，完全依赖于你是否在所有可能路径上都守住了 :root 这一道防线。
