CSS变量是设计系统落地的刚性前提，因其支持运行时动态修改、JavaScript读写、主题切换及设计令牌映射；必须定义在:root以确保唯一可信源；回退值仅用于可选配置或兼容降级，不可用于必填变量。
CSS变量不是“可选增强”，而是设计系统能真正落地、可维护、可交付的刚性前提。没有它，所谓设计系统只是命名约定和文档，不是可执行的代码契约。
为什么不能只用预处理器变量（如Sass $color-primary）？
预处理器变量在编译时就被替换成具体值，运行时不可变、不可继承、无法被JavaScript读写。这意味着：
- 主题切换必须刷新页面或重载CSS文件，
document.documentElement.style.setProperty('--theme', 'dark')这类操作完全无效 - 组件库无法响应用户偏好（比如系统级暗色模式），
prefers-color-scheme媒体查询无法与变量联动 - 设计令牌（Design Tokens）JSON 无法直接映射到样式层——你得靠脚本把 JSON 转成 CSS，再注入
:root，中间多一层脆弱链路 - AI生成CSS时，
var(--spacing-md)是语义明确的引用；而16px是魔法数字，AI无法推断其设计意图
为什么必须定义在 :root 而非组件内部？
全局作用域不是为了“方便”，而是为了建立唯一可信源（source of truth）。一旦允许组件随意定义同名变量（如 .card { --primary-color: #007bff; }），就会触发以下连锁问题：
- 父组件设了
--primary-color，子组件又覆盖一次，调试时getComputedStyle(el).getPropertyValue('--primary-color')返回的值取决于当前元素的作用域链，难以追溯 - 设计系统文档里写的“主色是 #409eff”，实际渲染可能是 #007bff，因为某个卡片组件偷偷改了局部变量
- 暗色主题切换逻辑必须遍历所有可能污染变量的组件并重置，而不是简单地切换一个
data-theme="dark"属性 -
:root是唯一能被@media (prefers-color-scheme: dark)安全包裹的顶层作用域，其他选择器不支持嵌套媒体查询
var(--x, #fff) 的回退值到底该不该写？
应该写，但仅限两类场景：
立即学习“前端免费学习笔记（深入）”；
- 变量本身属于“可选配置”，比如
--card-shadow，组件不强制依赖它，有则渲染阴影，无则忽略——这时回退值用none或空字符串更合理 - 变量用于降级兼容，比如旧版浏览器不支持 CSS 变量，需 fallback 到硬编码值：
background-color: var(--bg-color, #ffffff); - 绝对不要为必填设计变量加回退，例如
--primary-color。如果它缺失，说明设计系统初始化失败，应暴露错误而非静默兜底——否则你会在生产环境看到一堆意外的#333文字色，却查不到源头 - 回退值不能是另一个变量：
var(--text-color, var(--fallback-color))不合法，浏览器会忽略整个声明
最易被忽略的一点：CSS变量的“动态性”只在它被真正使用时才生效。定义了 --font-size-lg: 18px 没用，直到某个 font-size: var(--font-size-lg) 出现在匹配的选择器中，这个变量才进入样式计算流程。设计系统文档里列一百个变量，不如让第一个组件真实引用其中三个——这才是验证基石是否稳固的起点。
