如何通过CSS变量改善CSS代码的可读性

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 外面——这些细节决定变量到底能不能活下来，而不是变成又一套需要解释的“黑话”。