应统一在:root中定义带单位、语义清晰、按4px基数递进的--spacing-变量，如--spacing-xs: 4px、--spacing-sm: 8px、--spacing-md: 16px等，命名须表意明确（如--spacing-between-cards），禁用模糊名、跳档值、混用单位及缺省fallback，margin/padding可共用同一套变量，响应式需在@media中重设:root变量并兼顾safari兼容性。
直接在 :root 里定义一套带单位、语义清晰、按 4px 基数递进的 --spacing- 变量，是目前最可控、最易维护的方案——但变量名模糊、数值跳档、单位混用、漏兜底值，这四点一踩就崩。
怎么定义不翻车的 spacing 变量
核心不是“能不能写”，而是数值是否可推演、命名是否能自解释。
- 数值必须严格按 4px 基数递进：
--spacing-xs: 4px、--spacing-sm: 8px、--spacing-md: 16px、--spacing-lg: 24px、--spacing-xl: 32px；出现--spacing-odd: 10px这类孤立值，后续没人敢复用 - 单位统一用
px，别掺rem或em；响应式缩放留给@media覆盖，而不是靠变量自己带单位换算 - 命名优先表达用途：
--spacing-between-cards✅，--margin-sm❌，--spacing-2❌；数字编号和属性导向命名都会让语义断裂 - 所有变量必须显式带单位：
--spacing-md: 16会静默失效，浏览器只认--spacing-md: 16px
margin 和 padding 能共用同一套变量吗
能，而且应该共用——它们解决的是同一类问题：空间节奏。强行拆成 --pad-sm/--mar-sm，只会让开发者每次写样式前多问一句“这到底算内还是外”。
- 真正需要区分的是语义，不是属性类型：
--spacing-card-content表示卡片内部留白，它既可用于padding，也可用于margin-bottom（比如卡片标题紧贴顶部时） - 负边距要单独定义：
--spacing-neg-md: -16px，别用calc(var(--spacing-md) * -1)，增加计算负担且不可读 -
margin: var(--spacing-md) auto是危险写法——auto会被覆盖，水平居中可能失效；应写全margin: var(--spacing-md) auto var(--spacing-md) auto
gap、调试、动画这些场景怎么处理
gap 最干净，但有兼容性坑；调试和动画则不适合变量介入。
-
gap: var(--spacing-md)比一堆margin-right更可靠，还不怕塌陷；但老 Safari（15.4 之前）不支持gap+ 变量组合，得加回退：gap: 16px; gap: var(--spacing-md) - 调试时别依赖变量：DevTools 里看到
margin-bottom: var(--spacing-md)，你得再切到:root才知道实际是多少；临时微调建议直写像素值，改完再同步回变量 - 动画关键帧里禁用变量：
@keyframes slide { to { margin-left: var(--spacing-lg); } }在部分浏览器中会静默失败；动画中用固定值更稳妥 -
Grid和Flex中慎用gap+padding同时引用同一变量，视觉间距会翻倍；此时应降级为calc(var(--spacing-md) / 2)
响应式和跨组件间距最容易忽略什么
媒体查询不会自动触发变量更新，跨组件复用变量也不等于语义一致——这两点被忽略最多。
- CSS 变量没有响应式能力：
:root { --spacing-md: 16px }写完，小屏还是 16px；必须在@media里重定义：@media (max-width: 768px) { :root { --spacing-md: 12px; } } - Safari 15.4 之前不支持在
@media里动态更新:root变量；需用html.mobile { --spacing-md: 12px; }+ JS 切 class 兜底 - 全局共用
--spacing-md是错觉——Card 的内边距要 16px，Button 组外距可能只需 8px；应定义带作用域前缀的原子变量：--card-pad-y、--btn-group-gap - 变量未定义时不会 fallback：
margin-bottom: var(--spacing-md)在变量未声明时整条声明失效；必须写var(--spacing-md, 16px)显式兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
