必须在:root中统一定义语义化css变量（如--color-primary、--space-md），再通过媒体查询覆盖值，才能确保全局生效、主题切换可靠、响应式维护高效；组件内零散定义会导致作用域隔离、维护失控、视觉不一致。
直接在 :root 里定义语义化变量，再用媒体查询动态覆盖，是唯一能兼顾一致性与响应性的做法。硬编码颜色值或像素间距，在中大型项目里等于埋雷。
为什么不能在组件里零散定义 --color-primary 或 --space-md
变量必须挂载在 :root 才能全局生效。如果在 .card 里写 --color-primary: #5a67d8，那 .button 就拿不到这个值，除非显式继承或重复声明。更麻烦的是：主题切换时，你得手动遍历所有组件类去改——这根本不可维护。
- 所有设计系统变量统一收口到一个
design-tokens.css文件中 - 变量名必须语义化，比如
--color-primary而不是--blue-500，否则换主题时完全不知道它用在哪 -
var(--color-primary, #007bff)的第二个参数是 fallback，仅当变量存在但值非法（如--color-primary: none）时才触发；变量未定义时，整个var()表达式无效，属性会被浏览器忽略
怎么让 --space-md 在桌面端变大、移动端变小
别在每个组件里写一堆 @media 块去重设 margin，那样后期调整断点或数值时要改十几处。正确做法是只在 :root 上用媒体查询覆盖变量本身：
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
}
<p>@media (min-width: 768px) {
:root {
--space-md: 16px;
--space-lg: 24px;
}
}</p><p>@media (min-width: 1024px) {
:root {
--space-md: 20px;
--space-lg: 32px;
}
}</p>
- 变量值必须带单位（
16px，不能只写16），否则var(--space-md)会解析失败 - 不要用
calc(var(--space-md) * 1.2)动态缩放——媒体查询覆盖更稳定、可读性更强 - 负边距场景（如卡片标题上移）应单独定义
--space-neg-md: -12px，避免calc(var(--space-md) * -1)增加运行时开销
Grid 和 Flex 布局中怎么安全使用 --grid-gap 和 --space-md
gap 属性只对 Flex/Grid 容器生效，不能用在普通 div 上。如果你给一个非容器元素写 margin-bottom: var(--space-md)，它当然可以工作；但若误以为 gap 也能这么用，就会白忙活。
- Grid 列宽下限、间隙、内边距等可变参数，必须抽成
:root变量，例如--grid-min-item: 280px、--grid-gap: var(--space-md) - 子元素要收敛：图片加
max-width: 100%，flex 项加min-width: 0，否则auto-fit会因内容撑开而失效 -
padding不继承，所以卡片组件必须显式写padding: var(--space-sm)，不能指望父容器传下来
真正容易被忽略的，是变量作用域和 fallback 的实际行为——很多团队以为写了 var(--x, #000) 就万事大吉，结果变量名拼错或未引入 design-tokens.css，页面直接“失色”，却查不出源头在哪。调试时优先检查 :root 是否真的挂载了变量，而不是急着改组件样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
