不能全局共用--spacing-md，因变量名一致不等于语义一致；应定义带作用域前缀的原子级语义变量（如--card-pad-y、--gap-in-btn-group），按用途而非属性类型命名，并在组件类中声明以绑定上下文。
直接在 :root 里定义 --spacing-sm 这类变量，再到处 var(--spacing-sm)，看似统一，实则埋下错位隐患——组件对“中等间距”的理解根本不同，强行复用只会让按钮撑开、卡片重叠。
为什么不能全局共用 --spacing-md
变量名一致不等于语义一致。Card 的内边距需要 16px，Button 组的外边距可能只需 8px；若都用 --spacing-md: 16px，Button 就会多出一倍空白。问题不在变量有没有，而在它是否绑定具体上下文。
- 真正该定义的是原子级语义变量，比如
--gap-between-sections、--pad-inside-card、--gap-in-btn-group - 每个变量只服务一个不可再分的用途单元，不跨场景复用
- 命名必须带作用域前缀，
--card-pad-y比--spacing-md更难误用 - 禁止在
:root定义--spacing-xs后，又在任意组件里写margin: var(--spacing-xs)——这等于把语义解释权交给调用方
如何让 gap 同时适配 Flex 和 Grid 容器
gap 是布局属性，不是样式值；它的值应由容器决定，而非由布局类型决定。变量必须与布局解耦。
- 在容器上声明变量：
.btn-group { --gap-in-btn-group: 8px; display: flex; gap: var(--gap-in-btn-group); } - 同名变量也可用于 Grid：
.btn-grid { --gap-in-btn-group: 6px; display: grid; gap: var(--gap-in-btn-group); } - 变量值由组件类控制，
gap只是消费端；不要把--gap-in-btn-group写进:root - 响应式调整直接覆盖组件类：
@media (min-width: 768px) { .btn-group { --gap-in-btn-group: 12px; } }
margin 和 padding 能共用同一套变量吗
可以，但前提是变量按用途而非属性类型命名。盒模型内外边距本质是同类空间关系，拆成 --mar-sm/--pad-sm 反而增加认知负担。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
--space-between-items这类语义变量，它既可用于margin-bottom，也可用于gap或padding-inline - 数值统一按
4px基数递进：4px、8px、16px、24px，避免孤立值如10px - 变量值必须显式带单位：
--space-between-items: 12px合法，--space-between-items: 12会静默失效 - Grid/Flex 中慎用
gap+padding同时引用同一变量，视觉间距会翻倍；此时应降级为calc(var(--space-between-items) / 2)
最容易被忽略的点是：CSS 变量能控制的只有“间隙大小”和“列宽下限”，它无法决定“第几行”或“列数”。别试图用 repeat(var(--cols), 1fr)——规范明确禁止，浏览器会静默丢弃整条声明。
