直接在 :root 定义 --spacing-xs 到 --spacing-xl 不够用，因 CSS 变量无单位和语义约束，易导致单位遗漏、用途混淆、响应式逻辑混乱及计算失效等问题。
为什么直接在 :root 里定义 --spacing-xs 到 --spacing-xl 不够用
因为 CSS 变量本身不带单位或语义约束，--spacing-sm: 0.5 看似简洁，但实际使用时必须手动补 rem 或 px，一漏就失效；更麻烦的是，当设计系统要求“所有外边距用 rem、内边距用 px”时，单靠变量名无法区分行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用带单位的值定义，比如
--spacing-sm: 0.375rem，而不是--spacing-sm: 0.375 - 按用途分组命名，避免混用：用
--space-margin-xs和--space-padding-xs明确区分场景 - 别把响应式断点逻辑塞进变量值里——
--spacing-md不该是clamp(0.5rem, 2vw, 1rem)，这种计算放具体属性里更可控
margin/padding 写 var(--spacing-md) 后没生效的常见原因
最常踩的坑是：CSS 变量值被解析为字符串后参与计算失败。比如 --spacing-md: 0.75rem 没问题，但若误写成 --spacing-md: "0.75rem"（加了引号），var(--spacing-md) 就会返回空值，浏览器直接丢弃该声明。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查 DevTools 的 Computed 面板，看对应属性是否显示
var(--spacing-md)还是已展开的值；如果还是var(...)，说明变量未定义或拼写错误 - 不要在
:root外覆盖同名变量，除非你明确需要局部作用域——子元素里重定义--spacing-md会影响后代，但不会影响兄弟元素 - 避免在
@supports块里依赖未声明的变量，它不会触发回退逻辑
如何让 gap 也接入同一套 --spacing 变量
gap 是 Grid/Flex 专用属性，语法上和 margin 一致，所以可直接用 var(--spacing-md)，但要注意：它不接受负值，而你的 --spacing-negative-sm 变量如果存在，用在 gap 上会被忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
gap专用变量加前缀，比如--gap-md，和--space-margin-md分开管理，避免语义混淆 - Grid 容器中慎用
gap+padding叠加：两者都用了--spacing-md，视觉间距会翻倍，此时应降低 padding 值或改用calc(var(--spacing-md) / 2) - Flex 布局中
gap兼容性较好（Chrome 104+、Firefox 103+、Safari 16.4+），旧版本需降级为margin手动模拟
换主题时想动态切换整套间距，但 rem 基准变了怎么办
如果主题切换修改了 html 的 font-size（比如从 16px 切到 14px），所有基于 rem 的 --spacing 变量会自动缩放——这是优势，但也是陷阱：某些组件可能依赖固定像素间距（如图标和文字间的硬性 4px 间隙），这时不能全用 rem。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对必须稳定的间距（如 icon 与 text 的垂直对齐），单独定义
--space-px-4: 4px，并只在必要处使用 - 不要在
:root里用calc()动态算rem值，比如--spacing-md: calc(var(--base-font-size) * 0.75)——--base-font-size是自定义变量，无法被rem机制识别 - 主题切换脚本里，优先改
document.documentElement.style.fontSize，而不是重写整套--spacing变量，减少冗余操作
真正难的不是定义变量，而是确保每个组件在不同上下文（flex/grid/inline/绝对定位）里拿到的间距语义一致；很多人卡在“看起来一样”，其实 margin-collapse、box-sizing、line-height 都在悄悄干扰最终像素结果。
