CSS变量须定义在:root才具全局性，因其继承自根元素；应分层管理（基础色/语义色/状态色），JS须操作document.documentElement.style.setProperty动态更新，兼容IE需双写降级样式。
CSS 变量在 :root 定义品牌色，确实能实现全局替换，但必须注意作用域继承和运行时重计算的限制——它不是“改一处就全变”，而是“改变量值后所有用到它的样式实时响应”。
为什么一定要写在 :root 里？
因为 :root 是文档根元素（等价于 html），它的 CSS 变量会自动被所有后代元素继承。如果写在某个 class 或组件内部，比如 .header { --brand-color: #007bff; }，那只有它的子元素能读到，按钮、卡片、弹窗都拿不到。
常见错误是误以为写在 body 或某个 wrapper class 就够了——不行，必须是 :root 才有全局性。
-
:root下定义的变量天然具有最高继承优先级（除非被子元素显式覆盖） - 支持媒体查询内动态重定义，比如暗色模式：
@media (prefers-color-scheme: dark) { :root { --brand-color: #0056b3; } } - 不支持 CSS 预处理器那种编译期替换，它是运行时生效的，所以 JS 也能改：
document.documentElement.style.setProperty('--brand-color', '#28a745');
--brand-primary 和 --brand-secondary 怎么分层定义才不乱？
直接把所有颜色塞进 :root 容易失控。推荐按语义+层级分组：基础色（设计系统源头）、语义色（用途导向）、组件色（局部微调）。
例如：
:root {
/* 基础色 —— 来自设计规范，不直接用于组件 */
--color-blue-50: #e9f7fe;
--color-blue-100: #bde5f8;
--color-blue-500: #007bff;
--color-blue-700: #0056b3;
<p>/<em> 语义色 —— 全局统一映射，业务代码只用这些 </em>/
--brand-primary: var(--color-blue-500);
--brand-primary-hover: var(--color-blue-700);
--brand-secondary: var(--color-blue-100);</p><p>/<em> 状态色 </em>/
--state-success: #28a745;
--state-warning: #ffc107;
--state-danger: #dc3545;
}</p>
这样改品牌主色时，只需动 --brand-primary 的 var() 指向，所有依赖它的组件自动更新；而设计走查要调蓝阶时，也只改底层 --color-blue-500，语义层保持不变。
JS 动态切换主题时，setProperty 要注意什么？
直接 element.style.setProperty 只影响单个元素，必须操作 document.documentElement 才能触达全局。
- 别漏掉
!important—— CSS 变量本身不支持!important，但如果你在规则里写了color: var(--brand-primary) !important;，那 JS 设置的变量值依然生效，!important只影响该属性优先级，不影响变量取值 - 避免高频设置：比如滚动中反复调用
setProperty，会触发大量样式重计算。应做节流或合并批量更新 - 服务端渲染（SSR）场景下，首次 HTML 必须包含初始
:root变量，否则 JS 注入前页面会闪白或用浏览器默认色
兼容性兜底方案不能只靠 fallback
var(--brand-primary, #007bff) 这种 fallback 只对不支持 CSS 变量的浏览器（IE11 及更早）生效，但它不会“降级成预设色并持续同步”。一旦变量被 JS 修改，IE 就彻底失联。
真正可靠的兼容方式是双写：
.btn {
background-color: #007bff; /* IE fallback */
background-color: var(--brand-primary);
}
注意两点：
- 必须把降级值写在
var()前面，CSS 解析器会忽略不认识的函数，继续读下一条声明 - 不要指望 PostCSS 插件（如
postcss-css-variables）全自动补全——它无法处理 JS 动态设置的变量，仅适用于静态变量编译 - 如果项目还需支持 iOS Safari
最常被忽略的一点：CSS 变量区分大小写，--Brand-Color 和 --brand-color 是两个变量；另外，变量名里不能有中划线开头（如 --16px-font 合法，但 --16px 会被解析为数字字面量而非变量名）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
