css变量必须在:root定义才能确保全局生效，因其作为文档根节点可被所有元素继承；其他位置会导致子元素读不到、主题切换失效或ssr首屏错乱。
必须在 :root 中定义，否则根本不算“全局”——子元素读不到、主题切换会失效、SSR 首屏样式错乱。
为什么 :root 是唯一可靠的位置
CSS 自定义属性的作用域是继承的，而 :root 对应的是文档根节点（即 html 元素），所有元素都直接或间接继承它。写成 html 或 body 看似等价，但有隐患：
-
html选择器权重低，容易被其他规则意外覆盖； -
body下声明的变量，dialog、popup或某些 Shadow DOM 子树可能无法继承； - 服务端渲染（SSR）时，若变量不在
:root，首屏 HTML 里不会带入计算后的值，导致闪动或样式缺失。
var() 调用时 fallback 不是可选，而是必须考虑的兜底逻辑
变量未定义、拼写错误、或 JS 动态删除后，var(--color-primary) 会退化为初始值（比如 color 属性变成 inherit），而不是你期望的颜色。这不是浏览器 bug，是规范行为。
- 显式写 fallback：
color: var(--text-color, #333); - 避免在
var()里嵌套另一个var()做 fallback（如var(--text-color, var(--fallback-color))），部分旧版 Safari 不支持； - 组件库中尤其要加 fallback，因为消费者可能没引入变量文件。
多个主题共存时，别用 setProperty 逐个改，改 class 更稳
用 JS 遍历所有变量、挨个调用 document.documentElement.style.setProperty('--xxx', '...') 看似直观，但实际问题多：
- 触发多次重排重绘，性能差；
- 无法利用 CSS 的级联优先级控制局部覆盖（比如某个弹窗要强制浅色背景）；
- localStorage 持久化后，页面加载时 JS 还没执行，变量仍是默认值，造成首屏错乱。
正确做法是预设好主题 class，例如：
:root {
--bg-color: #fff;
--text-color: #333;
}
.dark-theme {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
}
然后只切 class：document.documentElement.classList.toggle('dark-theme')。CSS 引擎原生处理，无延迟、可继承、兼容 SSR。
和 SCSS/Less 变量混用是常见翻车点
CSS 变量运行在浏览器渲染时，SCSS 变量只存在于编译前。两者完全不互通：
- 不能写
--primary: $scss-var;—— 编译阶段就报错； - 不能在 SCSS 中用
lighten(var(--primary), 10%)——var()在编译时还是字符串，函数无法识别； - 如果项目同时用 SCSS 和 CSS 变量，建议把设计系统原子值（颜色、间距基数）只放在 CSS 变量里，SCSS 只做逻辑封装（比如
@mixin button-variant($bg)），不存原始值。
真正难的不是写对语法，而是让团队所有人理解：CSS 变量不是“另一种写法”，它是运行时的、继承的、可被 JS 干预的——它改变了样式系统的生命周期。漏掉这个认知，再规范的命名也救不了换肤断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
