:root是唯一符合规范的全局CSS变量挂载点，因跨文档兼容、层叠优先且继承链顶端；html或body声明会导致作用域残缺、覆盖风险或静默失效，且变量名须以--开头、每行末尾加分号、冒号无空格、字符串加引号。
:root 是唯一能保证全局生效、跨文档兼容、且不被意外覆盖的挂载点，不是“推荐”，而是规范要求的基础设施。
为什么不能用 html 或 body 声明全局变量
表面看 html { --color: red; } 也能读到，但实际有三处硬伤：
-
html在 SVG、XML 等非 HTML 文档中完全不匹配，:root才是规范定义的“文档根元素”锚点 - 层叠顺序上
:root比html更靠前——JS 动态注入style或 SSR 场景下，同名变量会被:root覆盖，html反而失效 -
body { --x: red; }声明后，html自身、head里的@import样式、甚至同级伪元素都拿不到这个变量，继承链没挂到顶端
:root 声明的硬性语法细节
写对位置只是第一步，漏掉一个分号或空格就会整块静默失效：
- 每个声明末尾必须加分号：
--spacing-sm: 8px;✅，--spacing-sm: 8px❌（后续所有变量全丢） - 冒号前后不能有空格：
--color: #000✅，--color : #000❌ - 字符串值必须加引号：
--font-family: "Inter", sans-serif;✅，--font-family: Inter, sans-serif;❌（空格截断，只剩Inter） - 不能拆单位：
--size: 16;和--unit: px;无法组合，font-size: var(--size) var(--unit);是非法语法
var() 引用时最容易踩的坑
var() 不是取值函数，而是带 fallback 的回退机制，裸用等于埋雷：
立即学习“前端免费学习笔记（深入）”；
- 必须提供 fallback：
color: var(--text-color, #333);，否则变量未定义时可能继承transparent，文字突然消失 - fallback 必须是当前属性合法值：
font-size: var(--size, 1rem);✅，font-size: var(--size, auto);❌ - 拼错变量名不报错：
var(--primry-color)（少个a）→ 直接用 fallback 或初始值，控制台零提示 - 不支持嵌套：
var(--color, var(--fallback))整个失效，最多只允许一层 fallback
动态更新只能用 style.setProperty()
CSS 文件里改了 :root 值，页面不会自动响应。运行时更新必须走 JS：
- 正确方式：
document.documentElement.style.setProperty('--primary-color', '#ff5733'); - 错误方式：
document.documentElement.style.cssText = '--primary-color: #ff5733';→ 会清空所有已有自定义属性
主题切换时别直接替换 className，用 setAttribute('data-theme', 'dark')，否则可能清掉 SSR 或 A/B 测试所需的其他 class。
