应定义语义化、4px基数递进、单位统一的:root间距变量，如--gap-xs: 4px；命名反映用途而非数值，避免跨场景复用同一变量，gap优先用于Flex/Grid容器，响应式通过媒体查询重设变量值。
直接用 --gap-sm、--gap-md 这类变量统一控制间距，比散落在各处的 margin: 12px 或 padding: 20px 更可靠——只要变量定义清晰、作用域合理、不滥用 !important 覆盖，就能大幅降低布局错位和响应式断裂的概率。
怎么定义一套可用的间距变量？
变量名要反映语义而非具体像素值，比如 --gap-xs 不等于 4px，而是“最小级功能间距”，后续可随设计系统升级批量调整。定义位置优先选 :root，确保全局可访问：
:root {
--gap-xs: 4px;
--gap-sm: 8px;
--gap-md: 16px;
--gap-lg: 24px;
--gap-xl: 32px;
}
- 避免用
rem或em定义基础间距变量，容易在嵌套中失准；坚持用px或dp（Kivy 等环境）保持线性可预期 - 不要把
--gap当万能值复用，比如按钮内边距和卡片外边距应分设--spacing-inline和--spacing-outer，否则后期改一个就全崩 - 若项目已用 Sass，可保留
$spacing-sm变量，但需同步导出为 CSS 变量供 JS 动态读取：:root { --gap-sm: #{$spacing-sm}; }
如何在 Flex/Grid 布局中安全使用这些变量？
Flex 和 Grid 的 gap 属性原生支持 CSS 变量，这是最干净的用法；但要注意旧版浏览器兼容性（IE 完全不支持，Safari 14.1+ 才稳定支持 gap）：
.list {
display: flex;
flex-wrap: wrap;
gap: var(--gap-md);
}
- 别在
margin上硬套var(--gap-md)替代gap，这会破坏 Flex/Grid 的自动对齐逻辑，尤其在justify-content: space-between场景下导致首尾元素贴边失效 - Grid 中若同时设了
gap和子项margin，实际间距 =gap + margin，容易 double 计算；建议只用gap控制容器内间距，margin仅用于容器对外留白 - 响应式切换时，直接重定义变量值比写多套
@media更轻量：@media (max-width: 768px) { :root { --gap-md: 12px; } }
为什么有时候 var(--gap-md) 不生效？
常见原因不是语法错，而是作用域或计算时机问题：
立即学习“前端免费学习笔记（深入）”；
-
var()在声明它的选择器作用域内才有效，如果在局部组件里覆盖了--gap-md，但子组件没继承该作用域（比如用了 Shadow DOM 或 CSS Modules），就会回退到:root值或 undefined - JS 动态修改变量时，若用
element.style.setProperty('--gap-md', '20px')，只影响该元素及其后代，父级或兄弟元素不受影响——这不是 bug，是 CSS 变量的设计机制 - 某些构建工具（如 Vite + PostCSS 插件）会在编译期尝试解析
var()，若变量未在同文件定义，可能报 warning 或静默 fallback 到初始值；检查控制台是否有CSS parse error类提示 - 别在
@keyframes里用var()控制动画中的间距，大多数浏览器不支持；动画内间距变化请用 JS 或固定值
真正难的是让团队所有人一致理解：CSS 变量不是“换个写法”，而是把间距从“写死的数字”变成“可配置的契约”。一旦某人绕过变量直接写 margin: 16px，整个体系就开始松动——这种事往往发生在紧急上线前，且第一次没人发现。
