直接写 margin: 12px 容易失控，因硬编码导致间距碎片、维护困难、单位混用破坏视觉节奏；应统一在 :root 定义基于 4px 基数的 spacing 变量，并按用途命名、组件级响应式调整。
为什么直接写 margin: 12px 容易失控
硬编码数值会让整个项目出现“间距碎片”：某个列表用 margin-bottom: 12px，另一个用 14px，再一个用 1.2em——不是不能用，而是后期改字号、换主题、做响应式时，得逐个找、逐个改，还容易漏。更麻烦的是，margin 和 padding 值混用不同单位（px/em/rem），视觉节奏就断了。
--spacing-md 这类变量该在哪定义、怎么用
统一在 :root 里声明，按 4px 基数递进，别塞孤立值：
:root {
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
}
然后组件里直接调用，不重复计算：
-
li之间留空：li { margin-bottom: var(--spacing-md); } - 首项不顶头：
ul { padding-top: var(--spacing-lg); } - 配合 flex 布局：
ul { display: flex; flex-direction: column; gap: var(--spacing-md); }
注意：变量名优先表达用途，比如 --spacing-between-items 比 --margin-md 更直观，也方便将来换成 gap 或 padding 而不改语义。
用 var(--spacing-*) 时最容易踩的三个坑
变量本身没毛病，但落地时容易忽略细节：
- 忘记重置
ul默认样式：ul, ol { margin: 0; padding: 0; }必须写在变量使用前，否则默认padding-left和变量叠加，缩进错乱 -
gap和margin混用导致双倍间距：比如ul设了gap: var(--spacing-md)，又给li加了margin-bottom，结果间距翻倍 - 在
@media里覆盖变量时，只改了:root，但旧值已注入样式表——必须确保媒体查询内的变量定义在同级或更高优先级作用域，否则无效
响应式场景下，spacing 变量要不要动态变？
要，但别全局替换。根变量保持稳定（比如始终用 px），响应式调整放在组件级：
- 小屏导航菜单：
@media (max-width: 768px) { .nav-list li { margin-bottom: var(--spacing-sm); } } - 大屏图文列表：
@media (min-width: 1200px) { .article-list li { margin-bottom: var(--spacing-lg); } }
真正难的不是定义变量，而是让团队所有人理解：同一个 --spacing-md 在按钮内边距、列表项间距、卡片外边距里，代表的是同一层空间关系——而不是“刚好看着顺眼”。这点一旦松动，变量就退化成另一套魔法数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
