移动端间距变量必须在媒体查询内重新赋值，因CSS变量无响应式能力；正确做法是在@media中重定义:root变量，并兼顾Safari兼容性、Shadow DOM作用域、命名语义化、单位统一、塌陷处理及JS动态修改限制。
移动端间距变量必须在媒体查询内重新赋值，不能只靠 :root 默认值
很多人写了 --spacing-md: 16px 在 :root 里就以为小屏会自动变小——结果真机一测还是 16px。根本原因是 CSS 变量不会“响应式”，它只认声明时的级联位置。
正确做法是把变量重定义写进媒体查询块里，并确保目标元素被该查询覆盖：
-
@media (max-width: 768px) { :root { --spacing-md: 12px; } }—— 这行在 Safari 15.4+ 才真正生效；老 Safari 需用html.mobile { --spacing-md: 12px; }+ JS 切 class - 如果组件有独立作用域（比如 Shadow DOM 或 scoped style），得把变量声明移到组件选择器内：
.card-mobile { --spacing-md: 8px; } - 别指望
var(--spacing-md)在未命中任何媒体查询时自动 fallback——它就是 undefined，除非你写var(--spacing-md, 16px)
变量命名要带语义和断点前缀，别用数字编号或属性名
写 --gap-1 或 --margin-sm 是自找麻烦。--gap-1 不知道是大是小，--margin-sm 和 --padding-sm 本质重复，且一旦设计稿把 margin 改成 padding，就得改两套变量。
推荐命名方式：
立即学习“前端免费学习笔记（深入）”；
- 层级清晰：
--spacing-xs、--spacing-sm、--spacing-md、--spacing-lg - 语义优先：
--spacing-between-cards比--spacing-md更明确用途 - 单位统一：全部用
px，别混rem或em——后者在嵌套缩放时行为不可控 - 基数严格：按 4px 递进（4/8/12/16/24/32），跳档值（如 10px）后续没人敢复用
gap / margin / padding 全部共用同一套变量，但要注意塌陷和兼容性
用 gap: var(--spacing-md) 写 Flex/Grid 间距最干净；但老 Safari 对 gap + 变量组合支持不稳定，必须加回退：
-
gap: 16px;gap: var(--spacing-md); -
margin-bottom: var(--spacing-md)要小心塌陷——两个相邻块都设这个，实际间距仍是单倍，不是双倍 - 避免
margin: var(--spacing-md) 0这种简写，CSS 不支持部分替换；必须写全margin: var(--spacing-md) 0 var(--spacing-md) 0 - calc() 里单位必须显式：
calc(var(--spacing-md) + 2px)合法，calc(var(--spacing-md) + 2)会失效
JS 动态修改变量时，媒体查询不会重新触发
用 document.documentElement.style.setProperty('--spacing-md', '8px') 确实能改值，但已生效的媒体查询不会因此重跑——也就是说，你手动切了变量，但 @media (max-width: 768px) 里的样式规则不会自动启用或禁用。
这导致两个常见陷阱：
- 用户手动切换深色模式或字体大小时，如果同时依赖媒体查询和 JS 修改变量，视觉可能错乱
- 服务端渲染（SSR）场景下，初始 HTML 里
:root的变量值是静态的，客户端 JS 修改后，媒体查询块不会感知变化 - 真正需要动态响应的场景（比如折叠屏展开），优先用
window.matchMedia监听，而不是靠 JS 改变量去“模拟”断点
:root + 媒体查询变量更新，结果测试发现某些子组件没继承到新值，往往是因为它没被媒体查询选择器匹配到，或者用了 Shadow DOM 隔离。这种问题不看 computed 样式，光看代码很难定位。 
