直接写 margin: 16px 会失控，因其脱离语义和上下文，无法区分卡片间距、按钮内边距或标题下边距；应定义按4px基数递进、单位统一为px、命名表达用途的--spacing-变量，并在引用时带默认值、慎用简写、显式标注单位。
为什么直接写 margin: 16px 会失控
不是数值本身有问题，而是它脱离了语义和上下文。同一处 16px 可能是卡片间距、按钮内边距、标题下边距——三者逻辑不同，但硬编码后无法区分。设计规范一变（比如改 20px），全局搜索替换会误伤 font-size: 16px 或 border-width: 16px；更糟的是，某处加了 !important 覆盖，其他地方就不同步，视觉节奏直接断裂。
怎么定义一套真正能复用的 --spacing- 变量
必须满足三个硬条件：数值按 4px 基数严格递进、单位统一为 px、命名表达用途而非属性或数字编号。
-
--spacing-xs: 4px（图标与文字间） -
--spacing-sm: 8px（按钮内边距、小元素间隙） -
--spacing-md: 16px（卡片之间、段落间距） -
--spacing-lg: 24px（区块分隔、大容器留白） -
--spacing-xl: 32px（页面级呼吸感）
别写 --spacing-1 或 --margin-sm，前者含义模糊，后者把 margin 和 padding 拆开反而增加认知负担——它们解决的是同一类问题：空间节奏。
在组件里怎么安全引用这些变量
关键不是“能不能用”，而是“怎么用才不掉坑”。变量只是替换了数字，不会绕过 CSS 渲染规则。
立即学习“前端免费学习笔记（深入）”；
- 所有
var()调用都建议带默认值：margin-bottom: var(--spacing-md, 16px)，避免变量未定义时样式失效 -
gap可直接用：gap: var(--spacing-md)，但老 Safari 需回退：gap: 16px; gap: var(--spacing-md) - 慎用简写：
margin: var(--spacing-md) 0不合法，必须写全：margin: var(--spacing-md) 0 var(--spacing-md) 0 -
calc()中单位不能省：calc(var(--spacing-md) + 2px)合法，calc(var(--spacing-md) + 2)会失效
响应式适配时变量怎么更新
CSS 变量本身没有响应式能力，:root 里写的值不会随屏幕尺寸自动变化。必须靠媒体查询重定义：
:root {
--spacing-md: 16px;
}
@media (max-width: 768px) {
:root {
--spacing-md: 12px;
}
}
注意两点：Safari 15.4 之前不支持 @media 内动态更新 :root 变量，需用 html.mobile { --spacing-md: 12px; } + JS 切 class；Shadow DOM 或 scoped style 中，变量声明得移到对应选择器内，否则读不到。
, 16px 或在 calc() 里少个 px，样式就静默失效，排查时根本想不到是变量层面的问题。 
