必须在 :root 中声明 CSS 变量，其他地方仅用 var(--xxx) 引用；局部声明、媒体查询内修改或嵌套 fallback 会导致复用困难、渲染异常与维护失控。
必须在 :root 里声明变量，其他地方只用 var(--xxx) 引用——这是唯一真正减少重复的路径。局部声明、媒体查询里乱改作用域、嵌套 fallback，只会让问题更隐蔽。
为什么只能在 :root 声明变量
变量不是“写在哪都能用”的值。:root 等价于 html 元素，作用域覆盖整页；写在 .button 或 .card 里，其他组件根本读不到，子元素也继承不到或被覆盖。
-
--color-primary写在:root，按钮、标题、表单全都能用 - 写在
.btn里，.header就无法复用，后期换主题得挨个grep替换 - 局部变量只适合极少数场景（如组件内动态控制），全局管理必须靠
:root
var() 的 fallback 写法错一个字符就失效
写成 color: var(--text-color, var(--fallback))，浏览器不会解析第二层 var()，最终渲染出字面量字符串 "var(--fallback)"，文字直接消失——控制台无报错，Computed 面板里却显示原样。
- 正确 fallback：先写兜底值，再覆盖为变量，例如
color: #333; color: var(--text-color, #333); - 如果依赖另一个变量（如
--text-color: var(--text-default)），确保--text-default已在:root中声明且有确定值 - 别用函数嵌套 fallback，CSS 不支持
数值类变量必须绑定基础单位
写一堆 .mt-1 { margin-top: 0.25rem; }、.mt-2 { margin-top: 0.5rem; }，等于把重复从值挪到了类名上。后期调大基础单位，要改二十个地方。
立即学习“前端免费学习笔记（深入）”；
- 在
:root定义--space-unit: 0.25rem;，工具类用calc(var(--space-unit) * 4)生成倍数 - 单位必须显式写出：
--size: 16px✅，--size: 16❌（calc(100% - var(--size))会失败） - 字号响应式别靠媒体查询改
:root变量——:root是静态作用域，媒体查询里改它不触发重计算；推荐用clamp(14px, var(--font-size-base), 18px)配合变量
深色模式切换别用 @media (prefers-color-scheme: dark) 直接覆盖变量
媒体查询触发变量重设时，浏览器会同步重绘所有引用该变量的元素。如果 --bg 用在几十个卡片、按钮上，肉眼可见闪烁。
- 改用
html.theme-darkclass 切换：:root.theme-dark { --bg: #1e1e1e; --text: #eee; } - 配合
transition: background-color 0.2s控制过渡，避免突兀刷新 - 变量覆盖没有“回退”机制，一旦被改写，全局生效，除非再显式重置
真正难的不是写几个 --xxx，而是守住 :root 这条线——所有变量定义都从这里出发，所有引用都只靠 var() 拉取，中间不插手、不绕路、不嵌套 fallback。越想“灵活”，越容易失控。
