最轻量可控的CSS变量管理方式是在:root中定义带单位、语义清晰的间距与圆角变量（如--spacing-sm: 0.5rem; --radius-md: 0.5rem），组件统一用var()引用并支持calc()微调和媒体查询覆盖，同时兼顾IE11 fallback、Tailwind同步及JS安全读取。
直接在 :root 里定义语义化变量，所有组件用 var() 引用，改一处就全局生效——这是目前最轻量、最可控的统一管理方式。
为什么不能每个组件里写死 margin: 8px 或 border-radius: 4px
硬编码会让设计迭代变成逐文件搜索替换。比如把卡片圆角从 4px 改成 6px，你得翻遍所有 .card、.modal、.button 的样式文件，漏一个就视觉不一致。更麻烦的是，不同设计师给的间距值常有细微差异（8px vs 0.5rem），时间一长，整个项目就积累出十几种“看起来差不多”的数值，维护成本指数级上升。
无序列表呈现关键问题：
- 变量未定义时，
var(--spacing-sm)会退成无效值，整条声明被浏览器忽略（IE11 就是直角+无边距） - 单位缺失导致
calc()失效：写--spacing-sm: 0.5然后margin: calc(var(--spacing-sm) * 2)→ 结果为0 - 命名太笼统（如
--radius）会导致组件覆盖困难；命名太细（如--radius-btn-sm）又容易失控
:root 中该定义哪些变量？怎么命名才不踩坑
推荐五档圆角 + 四档间距，全部带单位、语义清晰：
:root {
/* 间距：用 rem 更安全，缩放时不会失真 */
--spacing-xs: 0.25rem; /* 4px */
--spacing-sm: 0.5rem; /* 8px */
--spacing-md: 1rem; /* 16px */
--spacing-lg: 1.5rem; /* 24px */
<p>/<em> 圆角：避免用百分比做基础值，防止 calc() 溢出 </em>/
--radius-xs: 0.125rem; /<em> 2px </em>/
--radius-sm: 0.25rem; /<em> 4px </em>/
--radius-md: 0.5rem; /<em> 8px </em>/
--radius-lg: 1rem; /<em> 16px </em>/
--radius-full: 50%;
}</p>
命名要点：
- 用
--radius-card而不是--radius，避免全局污染和覆盖冲突 - 不用
--spacing-1/--spacing-2这类无意义数字，别人看不懂 2 是大还是小 - 圆形头像这种强语义场景，直接写
border-radius: var(--radius-full)，别套计算
组件内怎么引用才真正“统一”又不失灵活性
核心原则：所有圆角/间距必须走变量，不留硬编码“漏网之鱼”。局部微调优先用 calc()，而不是另起变量。
错误示范：border-radius: 8px 和 border-radius: var(--radius-md) 混用 → 后者改了，前者不变，立刻不一致。
正确做法：
- 按钮默认圆角：
border-radius: var(--radius-sm); - 需要更大一点的卡片：
border-radius: calc(var(--radius-md) * 1.5);（结果是12px） - 深色模式下收窄圆角：
@media (prefers-color-scheme: dark) { :root { --radius-md: 0.375rem; } } - 响应式降级（减少动效）：
@media (prefers-reduced-motion: reduce) { :root { --radius-md: 0; } }
注意：媒体查询里只能覆盖变量值，不能用 var() 写断点，@media (max-width: var(--breakpoint-md)) 是非法语法。
兼容旧浏览器和 Tailwind/JS 等外部系统怎么对齐
CSS 变量是渐进增强，不是替代方案。IE11 完全不识别 var()，所以 fallback 必须写在前面：
.btn {
border-radius: 4px; /* IE11 及更早版本用这个 */
border-radius: var(--radius-sm, 4px); /* 现代浏览器用变量，fallback 保底 */
}
Tailwind 用户需手动同步：theme.borderRadius 配置项要和 :root 里的变量值严格一致，否则设计稿和实际渲染差 1px 都会明显。
JS 动态读取时注意：getComputedStyle(document.documentElement).getPropertyValue('--radius-md') 返回的是字符串（如 "0.5rem"），不能直接参与数学运算，得先 parseFloat 提取数值再处理。
最容易被忽略的一点：所有变量值必须带单位。不带单位的 --radius-md: 8 在 calc(var(--radius-md) * 2) 里会失效，而 --radius-md: 8px 才能正常乘算。这个细节一旦漏掉，调试半天都找不到原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
