应统一用--spacing-xs等变量管理margin/padding/gap，数值按4px基数递进（如4px、8px、16px），命名需表意明确（如--spacing-between-items）、单位统一为px，响应式通过@media重设:root变量，避免塌陷与兼容性问题。
直接用 --spacing-xs 这类变量统一管 margin/padding/gap，比到处写 margin: 8px 更稳、更易维护——前提是变量定义有节奏、命名不模糊、单位不混搭。
怎么在 :root 里定义一套能复用的 spacing 变量
数值必须按 4px 基数递进，比如 --spacing-xs: 4px、--spacing-sm: 8px、--spacing-md: 16px、--spacing-lg: 24px、--spacing-xl: 32px。跳着写 --spacing-odd: 10px 看似灵活，实则后续没人敢复用，还会拖慢设计走查。
变量名优先表达用途，不是属性类型：
- ✅
--spacing-between-items（列表项间隙） - ✅
--spacing-section（区块级上下留白） - ❌
--margin-sm或--pad-base（语义不清，容易和别的组件冲突）
所有值统一用 px，别掺 rem 或 em。响应式调整留到媒体查询里覆盖，而不是靠变量自己带单位换算。
为什么 margin 和 padding 要共用同一套 spacing 变量
因为它们解决的是同一类问题：空间节奏。强行拆成 --pad-sm 和 --mar-sm，等于让开发者每次写样式前多问一句“这到底算内还是外”，而实际开发中，设计稿一句话就能把 padding-bottom 改成 margin-bottom。
真正需要区分的是场景语义，不是 CSS 属性名：
- 一个卡片内部文字离边框的距离，和它跟下一个卡片的间距，可能都来自
--spacing-md，但含义不同 - 用
--spacing-card-content和--spacing-card-sibling才是合理分层 -
gap同样适用这套变量——Flex/Grid 的gap: var(--spacing-md)比一堆margin-right更干净，还不怕塌陷
用变量时最常踩的三个坑
第一是漏默认值：margin-bottom: var(--spacing-md) 在变量未定义时会失效；得写成 var(--spacing-md, 16px) 才兜底。
第二是 margin 塌陷照常发生——变量只是替换了数字，不会关掉 CSS 渲染规则。两个元素都设了 margin-bottom: var(--spacing-md)，结果间距还是 --spacing-md，不是两倍。这时候该上 gap 或 padding，别硬扛。
第三是 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; }。所有用 var(--spacing-base) 的地方自动生效。
这样改一处，全项目响应式间距就同步了。但如果在按钮、卡片、表单里各自写一遍媒体查询块，后期对齐成本会指数级上升。
复杂点在于：spacing 变量不是“设完就跑”，它得嵌入组件语义、配合布局模式（gap 优先于 margin）、还要考虑老浏览器降级路径。最容易被忽略的是——变量名一旦定错，后面所有人写的 var(--xxx) 都在继承错误语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
