直接写 margin: 16px 会导致维护失控，因数值复用无语义；CSS 变量通过 --space-xs 等语义化命名统一管理间距，支持响应式覆盖与跨属性共用，但调试、像素微调和动画关键帧等场景应直写数值。
为什么直接写 margin: 16px 在中大型项目里会失控
因为 16px 可能今天是卡片间距，明天是按钮内边距，后天又变成模态框的外边距——但三处修改要同步改三次，漏一次就视觉不一致。更麻烦的是，设计稿换为 20px 时，全局搜索替换 16px 会误伤字体大小、border-width 等其他数值。
用 CSS 变量不是为了“高大上”，而是把「语义」和「数值」拆开：--space-xs 表示最小层级间距，--space-md 表示主内容分隔，数值只在 :root 里定义一次。
实操建议：
- 在
:root中定义一组基础变量，例如：:root { --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; } - 避免用物理单位命名变量，比如
--space-16—— 它无法表达用途，且后期调整数值时语义断裂 - 所有组件级样式（如
.card、.button）只使用这些变量，不写死像素值
Margin 和 Padding 能共用同一套变量吗
能，而且应该共用。它们本质都是空间度量，只是作用方向不同。强行拆成 --margin-md / --padding-md 会导致变量膨胀，且当某处需要「用 padding 实现 margin 效果」（比如 flex gap 不支持时用 padding 模拟）时，逻辑反而混乱。
立即学习“前端免费学习笔记（深入）”；
但要注意：不是所有地方都适合无差别混用。关键看语义是否匹配。
实操建议：
- 统一用
--space-*系列，再通过属性名明确意图：margin-bottom: var(--space-md)或padding-inline: var(--space-sm) - 对需要「负边距」的场景（如卡片标题紧贴顶部），单独定义
--space-neg-md: -16px，不要复用正向变量加负号——避免calc(var(--space-md) * -1)增加计算负担且不可读 - 慎用
margin的 auto 值与变量组合，例如margin: 0 auto var(--space-lg)是合法的，但margin: var(--space-md) auto易导致水平居中失效（auto 被覆盖）
响应式间距怎么用变量不写死断点
不能靠一个变量撑全场。移动端紧凑、桌面端宽松，但「紧凑」和「宽松」本身是相对概念，需按容器或上下文动态缩放。
直接在媒体查询里重设 :root 变量是最干净的方式，比每个组件写 @media 块更易维护。
实操建议：
- 在根元素上用媒体查询覆盖变量值：
@media (min-width: 768px) { :root { --space-md: 20px; --space-lg: 32px; } } @media (min-width: 1200px) { :root { --space-md: 24px; --space-lg: 40px; } } - 避免嵌套媒体查询（如组件内部再写
@media调整自己的margin），否则变量来源分散，调试时难以追踪 - 如果某组件需独立响应行为（比如仅它在小屏时取消底部间距），优先用 class 控制：
.card--no-bottom-space-mobile，而不是给它加专属媒体查询
哪些地方绝对不能用 CSS 变量管间距
不是所有间距都适合抽象。变量带来灵活性的同时，也引入了间接性——当问题出在间距上，你得先查变量定义、再查是否被覆盖、再查是否拼写错误。
以下情况建议绕过变量，直写数值：
- 临时调试用的
outline: 1px solid red或border: 1px solid #000—— 这类辅助线不需要语义，也不进生产代码 - 需要精确对齐的像素级微调，例如
transform: translateY(-1px)修正字体下沉，或top: -2px让 icon 与文字垂直居中 —— 这些是视觉补偿，不是布局尺度 - CSS 动画关键帧中的内联数值，如
@keyframes slide { to { margin-left: 100px; } }—— 变量在@keyframes中支持度有限（尤其旧版 Safari），且动画数值通常固定不变
变量是工具，不是教条。真正难的不是定义几个 --space-*，而是在每次写 margin 前，停半秒问自己：这个值，三个月后别人（或你自己）还能一眼看出它代表什么层级的空间关系吗？
