CSS变量应以语义化命名（如--spacing-sm）、集中定义于:root、统一单位、禁用嵌套引用和calc()乘除运算，通过媒体查询和JS动态覆盖实现响应式与主题切换。
直接用 --spacing-sm 代替 8px，不是为了写得“高级”，而是让别人（包括未来的你）一眼看懂这个数值的意图。
为什么硬编码数值会让协作和维护变困难
写 margin: 8px 没问题，但半年后回看或多人协作时，“这 8px 是按钮内边距？卡片间距？还是弹窗阴影偏移？”——没人能立刻回答。CSS 变量的核心作用是把数值和设计语义绑定，比如 --spacing-sm 明确表达“小间距”，而不是让人猜。
- 颜色值同理：
--color-primary比#007bff更易定位用途，换主题时也只需改一处 - 命名必须带语义前缀，避免
--blue-500这类纯视觉命名——深色模式下它可能不再是“蓝色”，语义就崩了 - 所有尺寸类变量统一用
rem或em，别混用px，否则根字体缩放时行为不一致
变量定义必须集中且可继承
所有全局变量应统一放在 :root 里，而不是分散在组件内部。否则其他模块无法复用，也失去“单一数据源”的意义。
- 组件级变量（如
.card { --card-padding: 1rem; }）可以存在，但必须和组件样式紧耦合，不能指望靠全局变量兜底 - 禁止在变量值里嵌套另一个变量，例如
--color-error: var(--color-red-500)—— CSS 不支持运行时求值，实际存的是字面字符串，后期追溯更难 - 变量覆盖必须写在
:root下，.mobile :root或html.mobile无效——媒体查询和伪类才触发变量作用域重计算
calc() 和 CSS 变量一起用的常见陷阱
width: calc(var(--spacing-lg) * 2) 看似合理，但浏览器会直接忽略整条声明：因为 calc() 不支持对变量做乘除运算，只接受加减和单位混合计算。
立即学习“前端免费学习笔记（深入）”；
- 乘法/除法逻辑必须提前算好，存成最终值，比如
--spacing-xl: 48px，而不是--spacing-base: 16px再现场乘 3 - 变量值不能带引号、不能有
!important、单位必须写全（1rem，不是1），否则calc()解析失败 - 调试时可用
console.log(getComputedStyle(document.documentElement).getPropertyValue('--spacing-sm'))确认值是否被正确解析（注意返回的是带单位的字符串）
响应式与主题切换必须靠变量覆盖，而不是重复写选择器
很多人习惯在媒体查询里重写整个规则：@media (max-width: 768px) { .card { padding: 12px; } }。一旦 .card 在多个地方用不同间距，维护成本飙升。
- 正确做法是在
:root定义默认值：--spacing-card: 24px，再在媒体查询里只覆盖变量：@media (max-width: 768px) { :root { --spacing-card: 16px; } } - 深色模式不要只依赖
@media (prefers-color-scheme: dark)，用户可能手动切换主题，需配合 JS 动态设置document.documentElement.style.setProperty() - 开发阶段 fallback 建议设成异常值，比如
var(--font-size-base, 999px)，页面一加载就暴露变量未定义的问题
真正难的不是定义变量，而是坚持用语义命名、拒绝硬编码、把计算逻辑挡在 CSS 外面——这些细节决定变量到底能不能活下来，而不是变成又一套需要解释的“黑话”。
