用 :root 定义全局颜色变量需直接在 :root 中声明语义化变量（如 --color-primary），避免嵌套或引用其他变量；使用 var() 时须设合法降级值，动态更新须调用 document.documentElement.style.setProperty。
怎么用 :root 定义全局颜色变量
直接在 :root 里声明 CSS 变量，所有后代元素都能访问，相当于“CSS 里的 const”。它不依赖具体选择器，也不受作用域限制，只要样式表加载了，变量就生效。
常见错误是写成 .theme { --primary: #007bff; } —— 这样变量只在 .theme 内部有效，子组件得显式继承或重写，完全失去“全局”意义。
-
:root是最高层级伪类，等价于html，但优先级略高，推荐无条件用它 - 变量名建议用语义化前缀，比如
--color-primary而不是--blue-500，方便后期换色系 - 避免在
:root中引用其他变量（如--color-text: var(--color-primary);），部分旧版 Safari 会解析失败
:root {
--color-primary: #007bff;
--color-success: #28a745;
--color-text: #333;
--color-bg: #fff;
}如何在组件中安全使用 var() 并设置降级值
CSS 变量不支持“未定义时自动 fallback”，var(--missing, red) 的第二个参数只是兜底色，不是“变量不存在时才生效”的逻辑开关。很多人误以为写了降级就能防崩，其实它只在变量值为空或语法错误时触发。
典型翻车场景：主题切换时动态移除 :root 中某变量，但组件样式没重写，结果所有用到 var(--color-error) 的地方全变成兜底色，UI 突然失真。
立即学习“前端免费学习笔记（深入）”；
- 降级值必须是合法 CSS 值，
var(--color-bg, transparent)可以，var(--color-bg, unset)不行（unset不是颜色） - 不要用
var()直接当background或color的唯一值，除非你确认兜底色在所有场景下都可接受 - 复杂组合建议拆开写，比如
border: 1px solid var(--color-border, #ddd);比border: var(--border-style, 1px solid #ddd);更可控
主题切换时为什么 document.documentElement.style.setProperty 比 class 切换更稳
用 JS 动态改 :root 变量，比给 html 加 class="theme-dark" 再写一堆 .theme-dark { --color-bg: #1a1a1a; } 更轻量、更易维护。关键是：变量更新后，所有依赖它的样式自动重计算，不用手动触发生命周期或强制重绘。
但容易踩的坑是——在非 document.documentElement 上调用 style.setProperty，比如 document.body.style.setProperty('--color-bg', '#000')，这根本不会影响 :root 变量，纯属白忙。
- 必须用
document.documentElement.style.setProperty('--key', 'value')才能修改:root层级变量 - 批量更新建议用
Object.entries(theme).forEach(([k, v]) => el.style.setProperty(k, v))，别一个个手写 - 服务端渲染（SSR）项目要注意：首次 HTML 输出时变量还没被 JS 注入，得在 HTML 中预设默认值，或用
<style>:root { --color-bg: #fff; }</style>内联兜底
哪些地方不能用 CSS 变量替代传统方案
CSS 变量不能用在 @media、@keyframes、content（伪元素内容）、font-family（某些字体名含空格时解析异常）等上下文中。最常被忽略的是：无法在 @supports 中检测变量是否支持，因为它是运行时特性，不是语法特性。
另一个隐形限制：CSS 变量无法参与计算函数（如 calc(var(--size) * 2)）中的单位混合，var(--gap, 8px) × 2 会报错，必须确保变量本身带单位且类型一致。
-
filter: brightness(var(--brightness));可以，但filter: var(--filter-value);不行（filter不接受字符串拼接） - 动画关键帧里不能用变量控制时间轴，
@keyframes fade { from { opacity: var(--start-opa); } }无效 - 需要响应式断点控制颜色？老实用
@media (prefers-color-scheme: dark)+:root重定义，别试图用变量驱动媒体查询
CSS 变量本质是运行时值容器，不是编译期宏。它省事的前提是你清楚变量在哪定义、在哪消费、在哪失效——尤其当设计系统跨多个微前端或 SSR/CSR 混合渲染时，变量注入时机和作用域边界很容易出岔子。
