CSS变量是运行时可变的“活值”，应统一在:root声明以实现全局管理与高效维护，避免分散定义、错误fallback、硬编码间距及媒体查询导致的闪烁问题。
CSS变量不是语法糖，是运行时可变的“活值”——把颜色、间距、圆角这些数值抽到:root里统一管理，改一处就全局生效，这才是减少重复代码量最直接有效的做法。
为什么:root是唯一该声明变量的地方
分散在各个选择器里定义--spacing-sm或--color-primary，会导致覆盖逻辑混乱、调试困难、无法被子元素继承。浏览器按层叠顺序计算变量值，但变量本身不参与优先级计算，!important对它无效。
-
:root等价于html，作用域覆盖整个文档，天然适合做全局配置中心 - 所有组件、工具类、主题样式都应从这里读取，而不是各自声明一份
- 若需局部覆盖（如深色模式），用
html.theme-dark这类class切换，而非在.card里重写--bg
var()的fallback只能是字面量，别嵌套函数
写color: var(--text-color, var(--fallback))会导致最终渲染出字符串"var(--fallback)"，页面文字直接消失——控制台没报错，computed值里却显示原样字符串。
- 正确 fallback：
color: #333; color: var(--text-color, #333);或color: var(--text-color, #666); - 如果依赖另一个变量，确保它已在
:root中声明且有确定值，例如--text-color: var(--text-default); --text-default: #333; - PostCSS插件（如
postcss-css-variables）在构建时静态解析，遇到跨@import的变量会报Error: Cannot resolve variable --text，得手动合并或改用JS注入
间距工具类必须绑定--space-unit，不能硬编码像素
写一堆.mt-1 { margin-top: 0.25rem; }、.mt-2 { margin-top: 0.5rem; }看似省事，实际等于把重复从值挪到了类名上，后期调整基础单位时要改二十个地方。
立即学习“前端免费学习笔记（深入）”；
- 在
:root里定义--space-unit: 0.25rem;，再用calc(var(--space-unit) * 2)生成倍数 - 工具类只负责方向和倍数（如
mt-4），不暴露具体数值，语义清晰且可批量更新 - 避免
m-2这类无方向前缀的命名，团队协作时容易误用；统一用mt-、mb-、mx-等前缀明确作用边界
深色模式切换别用@media (prefers-color-scheme: dark)直接覆盖变量
媒体查询触发变量重设时，浏览器会同步重绘所有引用该变量的元素，如果--bg用在几十个卡片、按钮上，肉眼可见闪烁。
- 用
html.theme-darkclass切换更稳：:root.theme-dark { --bg: #1e1e1e; --text: #eee; } - 配合
transition: background-color 0.2s实现平滑过渡，注意：CSS变量本身不可动画，必须靠属性（如background-color）承接变化 - 变量声明范围要克制——只在
:root和少数容器级class里定义，别在每个组件内部重复声明--primary
真正难的不是怎么写var()，而是约束团队不绕过:root私自定义变量；最容易被忽略的，是PostCSS构建阶段无法解析动态JS注入或跨文件@import的变量，这类问题只在上线后才暴露。
