CSS变量统一控制全局间距更灵活可控，应在:root中定义语义化rem单位变量如--space-xs至--space-xl，组件中用var()复用；重置样式不提供设计节奏，需配合变量建立系统化规则。
全局间距用CSS变量统一控制，比硬编码更灵活
直接改 padding 或 margin 的具体数值，项目一复杂就失控。CSS变量才是可控的起点——所有间距值集中定义、一处修改、全站响应。
怎么声明和使用间距变量
在 :root 里定义基础步长，再组合出常用尺寸。别用像素写死，优先用 rem 或 em 保证缩放一致性：
:root {
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
}然后在组件里复用：
.card { padding: var(--space-md) var(--space-lg); }
.btn { margin: 0 var(--space-sm); }- 变量名保持语义清晰，避免
--p10这类无意义缩写 - 不要在变量值里写计算式（如
calc(1rem + 2px)），部分旧浏览器不支持 - 如果项目要适配暗色模式或不同设备，可配合
@media或@layer覆盖变量值
为什么不能只靠重置（reset）或 normalize
normalize.css 或 * { margin: 0; padding: 0; } 只解决初始状态，不提供设计系统所需的间距节奏。它们清空了默认，但没建立新规则。
立即学习“前端免费学习笔记（深入）”；
- 重置后你依然得手动给每个
h1、p、section加margin-bottom，且容易漏、难维护 - 没有变量时，
margin-bottom: 16px和margin-bottom: 1rem混用，视觉节奏就断了 - 组件库升级或换主题时，硬编码间距会让覆盖成本翻倍
常见踩坑：变量作用域和继承失效
CSS变量是级联的，但不是所有场景都自动生效。最常遇到的是伪元素、iframe 内容、或 Shadow DOM 中拿不到根变量。
- 确保变量定义在
:root，而不是某个局部选择器下 - 检查是否被更高优先级样式覆盖（比如
!important或内联 style） - 在 React/Vue 组件中动态设置变量时，注意作用域是否限定在组件根节点内（例如
ref.current.style.setProperty('--space-md', '1.25rem')） - 调试技巧：在 DevTools 的 Styles 面板里搜索
var(--space-，看是否被标记为“无效”或“未定义”
变量本身不难，难的是让整个团队按同一套节奏写间距——设计稿里的 8px/12px/16px，必须对应到变量名，而不是谁看着顺手就写个 0.75rem。
