直接用--space-sm、--space-md等语义化变量管理卡片间距更优，因改一处即全局生效；硬写margin: 16px会导致多处逻辑混用、替换误伤、!important干扰，引发视觉错乱与高排查成本。
直接用 --space-sm、--space-md 这类语义化变量管卡片间距，比硬写 margin: 16px 强得多——改一处，所有卡片自动对齐；漏改一次，视觉就错乱。
为什么硬写数值会让卡片间距失控
16px 可能是卡片外边距、按钮内边距、模态框顶部留白，三处逻辑不同但数值相同。一旦设计规范改成 20px，全局搜替换会误伤 font-size: 16px 或 border-width: 16px；更糟的是，某张卡片被临时加了 !important，结果其他地方同步失效，排查成本远高于初期建变量。
怎么定义和使用 spacing 变量才不踩坑
在 :root 中声明基础值，按语义分档，不按像素命名：
-
--space-xs: 0.5rem（图标与文字间） -
--space-sm: 0.75rem（卡片内边距） -
--space-md: 1.25rem（卡片之间间隙） -
--space-lg: 2rem（区块级分割）
卡片组件里显式引用，别依赖继承：
立即学习“前端免费学习笔记（深入）”；
.card {
padding: var(--space-sm);
}
.card-list {
gap: var(--space-md);
}注意：padding 不继承，gap 只作用于 flex/grid 容器，不能用在普通块级元素上。
响应式覆盖必须在同一作用域下做
媒体查询里重定义变量，不是重写样式：
@media (max-width: 768px) {
:root {
--space-sm: 0.625rem;
--space-md: 1rem;
}
}常见错误是把变量写在 .card-mobile 选择器里，结果子元素无法继承；或者顺序颠倒，@media (min-width: 769px) 写在小屏后面却没加 !important，导致变量未生效。
哪些场景该放弃变量、直接写死数值
变量适合统一控制，但不是万能：
- 动画关键帧里别用
var(--space-md)，部分浏览器对calc(var() * 2)支持不稳定 - 需要像素级微调时（比如某张卡片底部多留 1px 避免截断），直接写
margin-bottom: 1px - 调试阶段临时加边框测间距，用
outline: 1px solid red比改变量快 - IE11 不支持 CSS 变量，如需兼容，得用 PostCSS 插件降级或 fallback 值
变量本质是维护工具，不是渲染优化手段；真正容易被忽略的，是每次改变量后，得手动检查所有用到它的组件是否意外撑开或塌陷——尤其是 gap 和 padding 混用时，盒模型叠加效果常被低估。
