CSS变量如何减少重复样式代码？

必须在 :root 中声明 CSS 变量，其他地方仅用 var(--xxx) 引用；局部声明、媒体查询内修改或嵌套 fallback 会导致复用困难、渲染异常与维护失控。

必须在 :root 里声明变量，其他地方只用 var(--xxx) 引用——这是唯一真正减少重复的路径。局部声明、媒体查询里乱改作用域、嵌套 fallback，只会让问题更隐蔽。

为什么只能在 :root 声明变量

变量不是“写在哪都能用”的值。:root 等价于 html 元素，作用域覆盖整页；写在 .button 或 .card 里，其他组件根本读不到，子元素也继承不到或被覆盖。

1. --color-primary 写在 :root，按钮、标题、表单全都能用
2. 写在 .btn 里，.header 就无法复用，后期换主题得挨个 grep 替换
3. 局部变量只适合极少数场景（如组件内动态控制），全局管理必须靠 :root

var() 的 fallback 写法错一个字符就失效

写成 color: var(--text-color, var(--fallback))，浏览器不会解析第二层 var()，最终渲染出字面量字符串 "var(--fallback)"，文字直接消失——控制台无报错，Computed 面板里却显示原样。

1. 正确 fallback：先写兜底值，再覆盖为变量，例如 color: #333; color: var(--text-color, #333);
2. 如果依赖另一个变量（如 --text-color: var(--text-default)），确保 --text-default 已在 :root 中声明且有确定值
3. 别用函数嵌套 fallback，CSS 不支持

数值类变量必须绑定基础单位

写一堆 .mt-1 { margin-top: 0.25rem; }、.mt-2 { margin-top: 0.5rem; }，等于把重复从值挪到了类名上。后期调大基础单位，要改二十个地方。

1. 在 :root 定义 --space-unit: 0.25rem;，工具类用 calc(var(--space-unit) * 4) 生成倍数
2. 单位必须显式写出：--size: 16px ✅，--size: 16 ❌（calc(100% - var(--size)) 会失败）
3. 字号响应式别靠媒体查询改 :root 变量——:root 是静态作用域，媒体查询里改它不触发重计算；推荐用 clamp(14px, var(--font-size-base), 18px) 配合变量

深色模式切换别用 @media (prefers-color-scheme: dark) 直接覆盖变量

媒体查询触发变量重设时，浏览器会同步重绘所有引用该变量的元素。如果 --bg 用在几十个卡片、按钮上，肉眼可见闪烁。

1. 改用 html.theme-dark class 切换：:root.theme-dark { --bg: #1e1e1e; --text: #eee; }
2. 配合 transition: background-color 0.2s 控制过渡，避免突兀刷新
3. 变量覆盖没有“回退”机制，一旦被改写，全局生效，除非再显式重置

真正难的不是写几个 --xxx，而是守住 :root 这条线——所有变量定义都从这里出发，所有引用都只靠 var() 拉取，中间不插手、不绕路、不嵌套 fallback。越想“灵活”，越容易失控。