:root是css全局变量唯一合法声明位置，因它是规范定义的文档作用域根锚点，跨html/svg/xml兼容、层叠优先且继承链顶端；html或body声明会导致作用域残缺、覆盖风险或静默失效。
可以，而且效果直接体现在改一处、全链路生效上，前提是变量定义和使用方式没踩坑。
为什么 :root 不是万能保险箱
很多人把所有变量一股脑塞进 :root，结果改一个 --color-red，按钮、边框、文字、阴影全跟着变——不是因为变量好用，是因为命名没分层、作用域失控。
- 设计系统级变量（如
--color-primary、--spacing-md）才该放:root，且必须带语义前缀，禁用--red这类裸名 - 组件内部私有变量（比如
--card-shadow）应定义在组件选择器里，避免污染全局作用域 - 如果用了 CSS-in-JS（如 Emotion），外部 CSS 文件里的
:root变量默认不可见，得显式注入或通过主题对象传入
var() 回退值不是可选项，是必填安全网
写 color: var(--text-color) 看似没问题，但一旦该变量未定义或被覆盖，浏览器会直接回退到 inherited 或 initial 值，导致文字突然消失或变黑——你根本看不到报错。
- 始终补上回退值：
color: var(--text-color, #333) - 回退值不能是另一个
var()，嵌套不生效：var(--x, var(--y))是无效语法 - 在媒体查询里重定义变量时，也要同步检查回退值是否仍合理（比如深色模式下
#333可能太暗）
JavaScript 动态改 setProperty 为什么有时没反应
调了 document.documentElement.style.setProperty('--color', 'red') 却没变色，大概率不是 JS 写错了，而是 CSS 优先级或作用域卡住了。
- 检查是否被
!important覆盖：CSS 变量本身不支持!important，但如果你在声明里写了color: var(--c) !important，那变量就算更新了也压不过它 - 确认变量定义位置：如果某个组件自己定义了
--color，那你改:root的同名变量对它无效 - 构建工具干扰：Vite/Webpack 中若用了 PostCSS 插件提前提取或压缩变量，可能导致运行时
setProperty操作的对象已不是原始 CSSOM 节点
真正难的不是学会写 --x: y 和 var(--x)，而是理清「谁在哪儿定义、谁在哪儿读取、谁有权覆盖」这三层关系。变量越用得多，作用域和优先级就越不能靠猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
