直接用em/rem控制间距会因绑定根字体大小导致缩放失真、响应式错乱和维护困难；应改用--space-unit变量配合calc()解耦语义与单位，并统一在:root中管理响应式断点。
为什么直接用 em/rem 控制间距会出问题
因为它们绑定根字体大小，一旦用户缩放页面、或系统启用“大号文字”辅助功能，margin 和 padding 就会跟着放大，可能把按钮挤出容器、让卡片重叠。这不是设计预期，而是单位耦合导致的副作用。
- 移动端横竖屏切换时，
rem值不变，但视口宽度突变，视觉密度失衡 - 多组件共用同一套
rem基准，但卡片、表单、按钮对“紧凑”和“宽松”的定义不同，硬套会失真 - 调试时改一个
:root的font-size，所有间距连锁反应，很难定位哪个组件被误伤
用 --space-unit + calc() 统一管理基础间距
把“1份间距”抽成无单位变量，再在使用处显式乘以单位，解耦缩放与数值语义。
:root {
--space-unit: 4; /* 纯数字，不带单位 */
}
.card {
padding: calc(var(--space-unit) * 1px) calc(var(--space-unit) * 2px);
}
.button {
margin: calc(var(--space-unit) * 0.5px) 0;
}- 变量值只代表“倍数”，
1px是锚点，不是像素固定值（高DPI下仍清晰） - 组件间可差异化调用：卡片用
* 2px，按钮用* 0.5px，语义清晰 - 后续要整体放大 25%，只需改
--space-unit: 5，无需遍历所有calc()
响应式断点别写在组件里，收口到变量定义
每个组件都写 @media 覆盖 margin，后期维护成本爆炸。正确做法是媒体查询只负责重设变量值，组件样式保持静态。
:root {
--space-unit: 4;
}
@media (min-width: 768px) {
:root {
--space-unit: 6;
}
}
@media (min-width: 1200px) {
:root {
--space-unit: 8;
}
}
/* 所有组件继续用 calc(var(--space-unit) * 1px) —— 无需改一行 */- 避免在
.header、.nav、.footer里重复写相同的媒体查询 - 变量作用域必须是
:root或目标容器祖先，子元素才能继承 - 不要用
clamp()直接塞进gap或margin——Safari 对gap: clamp(...)解析不稳定，容易回退为0
Grid/Flex 中优先用 gap，别给子项加 margin
当父容器是 display: grid 或 display: flex，子项的 margin 和容器的 gap 不会抵消，而是叠加，极易造成错位。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.grid { gap: 12px; } .item { margin: 6px; }→ 实际间距 = 18px - 正确写法：
.grid { gap: 12px; } .item { margin: 0; }，需要额外留白时单独加类，如.item.is-sticky-bottom { margin-bottom: 24px; } - Grid 中
gap不继承，也不受子项margin影响；Flex 中旧版 Safari 对gap支持弱，若需兼容 IE，只能用margin+:nth-child模拟，但语义断裂
实际项目里最容易被忽略的，是变量命名粒度——别用 --spacing-sm 这种模糊名，直接按场景命名，比如 --card-padding-y、--form-field-gap，否则当设计稿要求“表单字段垂直间距比卡片内边距小 2px”，你就得去翻十几处 calc(var(--spacing-sm) * ...) 找哪一个是它。
