CSS伪类 :root 如何统一管理全局基础设计系统变量？

设计系统中的变量，如果没有统一的“总调度台”，后续修改会异常痛苦。例如想更换主题色，就得满世界搜寻、逐一替换，场面令人头疼。因此，最佳实践只有一个——将所有全局基础变量统一收口到 :root 中。

为什么非要 :root，而不是 html 或 body？

这涉及关键的继承机制。浏览器对 :root 的天然处理是“强制继承”，所有元素默认都能从它身上获取自定义属性。如果写在 html 上，大部分场景看似正常，但一旦遇到 Shadow DOM、使用 all: unset 的元素，或某些 SSR 环境，继承链可能断裂。至于 body，其子元素若不显式继承，根本无法拿到变量。所以 :root 是 CSS 规范中唯一指定的“全局锚点”，特异性（0,1,0）也高于 html（0,0,1），冲突时更安全。

:root 的“储物柜”里该放什么，不该放什么

合适的“住户”：

• 语义化的颜色变量，如 --color-primary、--color-surface、--color-text
• 基础间距单位，如 --spacing-xs（4px）、--spacing-md（16px），配合 calc() 可搭建弹性系统
• 字体基准，例如 --font-size-base（16px）、--line-height-base（1.5）
• 圆角、阴影等设计 token，如 --radius-sm、--shadow-md

以下“危险品”请勿放入：

• 组件级样式值，比如 --button-padding，应由组件自行管理
• 需要 JS 动态计算的实时值，例如视口宽度百分比。CSS 变量本身不会响应 resize> 事件，此类需求需交给 JS + style.setProperty
• 带单位的复合表达式，如 --size: 1rem * 2。CSS 不支持这种运算，应写为 --size: 2rem，或使用 calc(var(--unit) * 2)

主题切换的正确姿势：拥抱 data-theme

很多人习惯直接通过媒体查询实现暗黑模式，比如 @media (prefers-color-scheme: dark) { :root { --color-bg: #1a1a1a; } }。但这里有两个常见陷阱：一是首次渲染时可能取错值；二是与用户手动切换的主题冲突后处理复杂。更专业的做法是用 data-theme 属性统一控制。

• 定义多个 :root[data-theme="dark"]、:root[data-theme="blue"] 等块，只覆盖需要变化的变量
• JS 切换时，使用 document.documentElement.setAttribute('data-theme', 'dark')，切勿用 className 替换，否则会清掉元素上可能已有的其他 class
• fallback 值一定要写“真实”且“可靠”的数据。例如 background-color: var(--color-surface, #ffffff)，变量未定义时白色兜底，避免样式崩溃

var() 失效的三大“元凶”

很多时候 var() 不正常工作，并非语法问题，而是作用域或值的时机出现状况：

• 最常见：变量名写错或大小写不一致。注意 --ColorPrimary 和 --color-primary 在 CSS 中是两个不同变量
• 变量声明位置被后续样式覆盖。确保 :root 块在样式表靠前位置加载，至少早于所有使用它的规则
• 值本身非法。例如 --size: 12 缺少单位，或 --color: #ggg 不是合法颜色值，此时 var() 会静默触发 fallback，但开发者可能未察觉变量已错误

真正注重细节的人，会打开 DevTools 的 “Computed” 面板，逐个检查 var(--xxx) 最终解析出的值是否与预期一致。这比写一百行注释更有效。