用CSS变量统一管理间距和圆角，应在:root中定义--spacing-xs、--spacing-sm、--radius-sm等语义化变量，组件通过var()引用；命名需具体（如--radius-card而非--radius），避免作用域污染；兼容IE需双写回退；Tailwind或JS中须手动对齐值，确保设计系统一致性。
怎么用CSS变量统一管理间距和圆角
直接定义一套--spacing-xs、--spacing-sm、--radius-sm等变量，所有组件通过var()引用，改一处就全局生效。
别在每个组件里写margin: 8px或border-radius: 4px——这种硬编码会让设计迭代变成逐文件搜索替换。
-
:root里集中声明，优先级高、易查找 - 数值建议用
rem或无单位数字（如0.25），避免px导致缩放失真 - 圆角推荐用
0、0.125rem、0.25rem、0.5rem、1rem五档，覆盖卡片、按钮、弹窗等常见场景
CSS变量命名冲突和作用域问题
变量名重复时，离元素最近的作用域生效。比如.card { --radius-sm: 8px; }会覆盖:root里的同名变量，但只影响.card及其子元素。
容易踩的坑是：在组件局部覆盖后忘了重置，导致嵌套子组件意外继承错误值。
立即学习“前端免费学习笔记（深入）”；
- 避免用太泛的名，如
--radius，改成--radius-sm或--radius-card - 不要在
body或html上覆盖:root变量，那等于全局污染 - 调试时用浏览器开发者工具的“Computed”面板看实际解析值，比查源码更快
和CSS-in-JS或Tailwind混用时怎么保持一致性
如果项目里同时用了Tailwind或styled-components，CSS变量不能自动同步过去，得手动对齐。
Tailwind默认的spacing和borderRadius配置必须和你的:root变量严格对应，否则设计师给的标注和前端实现会差几个像素。
- Tailwind配置中
theme.spacing要映射到--spacing-*的值，例如{ '2': '0.5rem' }对应--spacing-xs: 0.5rem - 在JS中读取变量要用
getComputedStyle(document.documentElement).getPropertyValue('--spacing-sm')，注意返回带空格的字符串 - 不建议在JS里动态写
style.setProperty去改基础变量，容易和CSS层逻辑脱节
旧版浏览器兼容性兜底方案
CSS变量在IE全系不支持，Android 4.4以下也挂。如果还要兼容，不能只靠var()。
最稳妥的是双写：先写静态值，再覆盖为变量，浏览器会忽略不认识的var()而回退到前一个声明。
button {
border-radius: 4px;
border-radius: var(--radius-sm, 4px);
}
- 别用
@supports (--color: red)做特性检测来包裹整套变量定义——它无法判断变量是否被正确解析 - 构建时用PostCSS插件（如
postcss-css-variables）可静态替换变量，但会丢失运行时灵活性 - 真正要兼容IE？老老实实放弃CSS变量，改用Sass/SCSS的
$spacing-sm变量，编译后输出纯CSS
变量本身不难，难的是团队所有人理解“改:root等于改设计系统”，而不是改某个按钮的边距。一旦有人绕过变量直写数值，整套体系就从内部开始松动。
