最轻量可控的统一方式是在:root定义带单位、语义清晰的变量并全局引用var()；硬编码导致失控，var(--radius-md)不生效主因是混用硬编码或变量未正确定义。
直接在 :root 里定义带单位、语义清晰的变量，所有组件用 var() 引用——这是目前最轻量、最可控的统一方式。硬编码 border-radius: 4px 或 margin: 1rem 会迅速让项目失控。
为什么var(--radius-md)有时不生效？
常见现象是改了变量值，但按钮/卡片圆角没变。根本原因不是 CSS 变量“失效”，而是样式里混用了硬编码值，或者变量本身未正确定义。
-
var(--radius-md)在变量未声明时会退为无效值，整条声明被浏览器忽略（IE11 下直接显示直角） - 单位缺失导致
calc()失效：比如--spacing-sm: 0.5（缺rem），再写margin: calc(var(--spacing-sm) * 2)→ 结果为0 - 命名太笼统（如
--radius）会让覆盖困难；太细（如--radius-btn-sm）又难维护
:root 中该定义哪些间距和圆角变量？
推荐五档圆角 + 四档间距，全部带单位、语义明确，兼顾缩放安全与媒体查询覆盖能力：
:root {
/* 间距：用 rem 更安全 */
--spacing-xs: 0.25rem; /* 4px */
--spacing-sm: 0.5rem; /* 8px */
--spacing-md: 1rem; /* 16px */
--spacing-lg: 1.5rem; /* 24px */
<p>/<em> 圆角：避免用百分比做基础值，防止 calc() 溢出 </em>/
--radius-xs: 0.125rem; /<em> 2px </em>/
--radius-sm: 0.25rem; /<em> 4px </em>/
--radius-md: 0.5rem; /<em> 8px </em>/
--radius-lg: 1rem; /<em> 16px </em>/
--radius-full: 50%;
}命名要点：--radius-card 比 --radius 更安全；不用 --spacing-1 这类无意义数字——别人无法判断“1”是大还是小。
立即学习“前端免费学习笔记（深入）”；
组件内怎么引用才真正统一又不失灵活性？
核心原则：所有圆角/间距必须走变量，不留硬编码“漏网之鱼”。局部微调优先用 calc()，而不是另起变量。
- 错误示范：
border-radius: 8px和border-radius: var(--radius-md)混用 → 后者改了，前者不变，立刻不一致 - 正确做法：卡片用
border-radius: var(--radius-md)，圆形头像直接用border-radius: var(--radius-full)，不套计算 - 需要微调时写
padding: calc(var(--spacing-md) - 2px)，而不是新增一个--spacing-md-minus - 网格容器加圆角后，子项间距靠
gap控制，padding给容器留白——别用子项margin模拟，它在 grid 中不可靠
最容易被忽略的是变量未定义时的降级行为——它不会报错，只是静默失效。加上 IE11 fallback、暗色模式切换、移动端 Safari 对 var() 在 clip-path 中的支持限制，这些边界情况往往要等上线才暴露。
