全局颜色变量必须定义在 :root 伪类中，因其是 CSS 规范指定的文档根元素，确保最高优先级、最广作用域（含 Shadow DOM），而 html 选择器属误用；var() 报错常因变量未定义或用于不支持场景（如 @keyframes、@media）；主题切换应仅更新 :root 变量以避免重绘；IE 兜底需双写降级值在前、var() 在后。
全局颜色变量该定义在 :root 还是 html？
必须定义在 :root 伪类里，不是 html。虽然两者在绝大多数场景下作用域等价，但 :root 是 CSS 规范明确指定的“文档根元素”，它保证了最高优先级和最广作用域——包括被 Shadow DOM 隔离的组件内部（在支持 CSS 自定义属性继承的前提下）也能访问到。
写成 html 选择器看似可行，但属于误用：它不覆盖 :root 的语义职责，且在部分旧版 Web Components 实现中可能失效。
:root {
--primary-color: #3b82f6;
--error-color: #ef4444;
--text-muted: #6b7280;
}var() 调用时为什么报错 “Invalid property value”？
常见原因不是语法写错，而是 var() 出现在不支持自定义属性回退值或嵌套计算的位置，或者变量根本未定义。
-
var(--missing)在未声明该变量时，会直接导致整个属性值无效（比如color: var(--missing);→ 整条声明被浏览器丢弃） - 不能在
@keyframes内直接用var()控制动画关键帧数值（如transform: translateX(var(--offset));），多数浏览器不支持 - 不能在
@media查询条件中使用var()（如@media (min-width: var(--breakpoint)) { ... }是非法的）
安全做法：始终提供回退值，例如 color: var(--primary-color, #3b82f6);
立即学习“前端免费学习笔记（深入）”；
如何让主题色切换不触发全量重绘？
关键在于只更新 :root 上的变量，而非替换 class 或重写整套 CSS 规则。浏览器对自定义属性的变更做了优化，只要变量值改变，所有依赖它的属性会异步重新计算，不会强制刷新整个布局树。
实操建议：
- 用 JavaScript 修改：
document.documentElement.style.setProperty('--primary-color', '#10b981'); - 避免在循环中高频调用
setProperty，可批量合并后一次设置 - 不要用
innerHTML替换<style>标签内容来“切换主题”，那会引发样式表重解析 - 深色模式检测可结合
matchMedia('(prefers-color-scheme: dark)')+ 动态 setProperty，无需 JS 监听 class 变化
IE 浏览器不支持 var()，有什么轻量兜底方案？
IE11 及更早版本完全不识别 var() 和 :root 中的自定义属性，且无法通过 Polyfill 完全模拟运行时变量行为。唯一可靠策略是「双写」：先写降级值，再写 var() 覆盖。
.button {
background-color: #3b82f6; /* IE fallback */
background-color: var(--primary-color);
color: #ffffff;
color: var(--text-on-primary, #ffffff);
}注意：第二个声明会覆盖第一个，现代浏览器解析到 var() 有效就用它；IE 忽略整条声明，继续使用上面那行。别把顺序反过来，否则 IE 会用默认色（如 transparent）。
真正麻烦的是需要根据变量做计算的场景（如 calc(1rem + var(--space-xs))），这种在 IE 中必须手动展开为固定值，无法自动化兼容。
