应将间距变量统一定义在 :root 中，如 --spacing-xs: 4px；组件中用 var(--spacing-md) 且必须带单位；避免嵌套 fallback 和 calc 单位不一致；命名需对齐设计语言（如 --space-s），并注明适用场景。
用 --spacing-xs 这类变量统一管间距
项目里到处是 margin: 8px、padding: 16px，手动改一遍容易漏、难对齐。直接在根元素定义 CSS 变量，所有组件就能联动响应。
常见错误：只在某个组件里定义 --spacing-sm，结果其他地方用不了；或者写成 var(--spacing-sm, 12px) 却没设 fallback，旧浏览器直接失效。
- 把变量集中写在
:root里，比如：:root { --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; } - 组件内用
margin: var(--spacing-md)，别写成margin: var(--spacing-md) 0再漏掉单位——CSS 变量值里必须带单位（8px，不能只写8） - 如果要兼容 IE，得另配一套 class（如
.m-8），CSS 变量本身不支持
批量替换时怎么避免破坏已有布局
改一个 --spacing-md 从 12px 到 14px，可能让按钮文字错位、卡片重叠——不是变量不好，是有些地方本不该用这个变量。
典型场景：表单控件的垂直间距和卡片内边距逻辑不同，但都用了 --spacing-md；一调全调，就出问题。
立即学习“前端免费学习笔记（深入）”；
- 先搜
var(--spacing-md)，看哪些地方真需要同步变，哪些该拆成独立变量（比如加个--form-spacing） - 用 DevTools 临时修改变量值，观察哪些区域“抖动”明显——那是依赖强、需重点验证的地方
- 不要跳过媒体查询里的变量使用，比如
@media (max-width: 768px) { --spacing-md: 10px; }，漏了会导致响应式错乱
calc() 和 CSS 变量混用时的单位陷阱
想让某处间距是「基础值 + 2px」，写成 margin: calc(var(--spacing-md) + 2) 会失效——2 没单位，浏览器不认。
这种写法在审查元素里看着正常，实际计算结果是 NaN，最终回退到默认 margin。
- 必须写全单位：
calc(var(--spacing-md) + 2px)或calc(var(--spacing-md) * 1.5) - 乘除运算中，只要有一个操作数带单位，结果就带单位；加减则要求**全部操作数单位一致**
- 嵌套变量慎用，比如
var(--spacing-md, var(--spacing-sm))，fallback 里再套var()在部分 Safari 版本里不生效
怎么让设计系统和前端变量真正对齐
设计师给的 Sketch 文件写的是「S=8 / M=12 / L=16」，前端却定义成 --space-1: 4px、--space-2: 8px，对接时靠人脑换算，三天就乱。
变量名不匹配，开发改需求、UI 改规范、测试验效果，全在猜。
- 变量名直接映射设计语言，比如用
--space-s、--space-m、--space-l，别用数字序号 - 把变量定义和设计文档放一起（比如同一份 Figma 变量页面 + 同一个 CSS 文件注释），更新时双向同步
- 加一行注释说明适用场景：
/* 用于按钮内边距、卡片分隔线距离 */，比写「基础间距」有用得多
事情说清了就结束。变量本身不难，难的是谁在什么时候改、改了影响哪几块、有没有留好退路——这些往往比语法更重要。
