最可控的spacing变量定义是在:root中按4px基数递进、统一用px单位、语义化命名（如--spacing-between-items），并规避默认值缺失、单位混用和Safari旧版兼容三类硬伤。
直接在 :root 里定义一套带单位、语义清晰、4px 基数递进的 --spacing- 变量，是最可控、最易维护的方式——但必须避开默认值缺失、单位混用和 Safari 旧版兼容这三类硬伤。
怎么定义不踩坑的 spacing 变量
数值必须严格按 4px 基数递进，比如 --spacing-xs: 4px、--spacing-sm: 8px、--spacing-md: 16px、--spacing-lg: 24px、--spacing-xl: 32px。跳着写 --spacing-odd: 10px 看似灵活，实则后续没人敢复用，还会拖慢设计走查。
所有值统一用 px，别掺 rem 或 em；响应式调整留到 @media 里覆盖，而不是靠变量自己带单位换算。
命名优先表达用途，不是属性类型：--spacing-between-items ✅，--margin-sm ❌；避免用数字编号（如 --spacing-1），别人看不懂“1”是大还是小。
立即学习“前端免费学习笔记（深入）”；
为什么 margin 和 padding 要共用同一套变量
它们解决的是同一类问题：空间节奏。强行拆成 --pad-sm 和 --mar-sm，等于让开发者每次写样式前多问一句“这到底算内还是外”，而实际开发中，设计稿一句话就能把 padding-bottom 改成 margin-bottom。
真正需要区分的是场景语义，不是 CSS 属性名：--spacing-card-content 和 --spacing-card-sibling 才是合理分层。
gap 同样适用这套变量：gap: var(--spacing-md) 比一堆 margin-right 更干净，还不怕塌陷。但注意：变量只是替换了数字，不会关掉 CSS 渲染规则——margin 塌陷照常发生，该用 gap 或 padding 的地方别硬扛。
用变量时最容易被忽略的三个坑
第一是漏默认值：margin-bottom: var(--spacing-md) 在变量未定义时会失效；得写成 var(--spacing-md, 16px) 才兜底。
第二是单位陷阱：calc(var(--spacing-md) + 2) 会失效——2 没单位，浏览器不认；必须写 calc(var(--spacing-md) + 2px)。
第三是 Safari 15.4 之前不支持在 @media 里动态更新 :root 变量。如果要兼容老 Safari，得用 html[data-theme="desktop"] 这类 class 切换兜底，不能只靠媒体查询改变量。
浮动布局里怎么让 spacing 变量真正起作用
CSS 变量本身不能修复浮动带来的根本问题：间距错乱、末项多留白、垂直卡位、父容器塌陷。想让 var(--spacing-md) 生效，必须配合 BFC 和单侧 margin：
- 父容器必须触发 BFC，推荐用
overflow: hidden或display: flow-root - 所有浮动子项统一只设
margin-right: var(--spacing-md)，禁止混用margin-left -
.item:last-child { margin-right: 0; }必须显式清除，不能依赖calc()或 JS 计算
与其在浮动上折腾变量，不如把它用作迁移杠杆：定义统一 --gap，浮动方案用 margin-right: var(--gap)，Flex 方案用 gap: var(--gap)。这样换布局时，只需改一行声明，间距自动对齐。
复杂点在于：变量本身很简单，难的是让整个团队把设计稿里的 8px/12px/16px 严格对应到变量名，而不是谁看着顺手就写个 0.75rem。一旦松动，整套体系就从“规范”退化为“参考”。
