最可控的间距管理是在:root中定义语义清晰、4px基数递进、单位统一为px的--spacing-变量，如--spacing-xs:4px、--spacing-sm:8px等，避免跳档、混单位、数字编号及属性导向命名，margin与padding共用同一套变量，gap同样适用，需注意默认值兜底、单位一致性及Safari兼容性。
直接在 :root 里定义一套带单位、语义清晰、按 4px 基数递进的 --spacing- 变量，是目前最可控、最易维护的间距管理方式——前提是变量命名不模糊、数值不跳档、单位不混搭。
怎么定义一套真正能复用的 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 要共用同一套 spacing 变量
它们解决的是同一类问题：空间节奏。强行拆成 --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 切换兜底，不能只靠媒体查询改变量
响应式间距别在每个选择器里写 media query
在 :root 设默认值，比如 --spacing-base: 8px；然后在 @media (min-width: 768px) 里只重设这个变量：:root { --spacing-base: 16px; }。
- 不要在每个组件里重复写
@media，那会失控，也难维护 - 如果项目需适配暗色模式或不同设备，可配合
@media或@layer覆盖变量值，但入口必须收口在:root - 调试时，在 DevTools 的 Styles 面板里搜索
var(--spacing-，看是否被标记为“无效”或“未定义”，这是最快定位作用域问题的方式
复杂点不在语法，而在变量命名是否真能对齐设计语言——设计稿里的 “8px 项间距” 必须对应到 --spacing-between-items，而不是谁看着顺手就写个 --space-2。
