直接写#007bff会降低可读性，因其缺乏语义，无法直观表达“主品牌色”意图；而CSS自定义变量如--color-primary能明确传递设计含义，提升协作与维护效率。
为什么直接写#007bff会降低可读性
人在阅读 CSS 时，颜色值、尺寸、间距这类硬编码数字本身不携带语义。比如看到 padding: 16px，你得倒推“这是按钮内边距？还是卡片默认间距？还是表单控件的统一留白？”。大型项目里同一数值可能在 20 多个地方重复出现，但没人能一眼确认它代表什么含义。
而 --spacing-md 或 --color-primary 这类命名，把意图直接暴露出来——不是“16px”，而是“中等间距”；不是 #007bff，而是“主品牌色”。这省去了上下文猜测成本，尤其对新加入项目的同学或跨团队协作时特别关键。
:root 中集中声明变量比散落在各处更易维护
把所有基础变量统一收口到 :root 块里，相当于建了一张“样式字典”。它不只方便查找，更重要的是：一旦要改主题色，你只需动一行 --color-primary，所有用到它的组件自动同步更新，不用 grep 全局再逐个替换。
注意几个实操细节：
立即学习“前端免费学习笔记（深入）”；
-
:root是全局作用域，但变量名区分大小写：--Color-Primary和--color-primary是两个不同变量 - 避免在多个选择器里重复定义同名变量（比如又在
.theme-dark里写一遍--color-primary），容易引发覆盖混乱 - 变量值不支持自动单位运算，
var(--spacing-md) * 2会报错，必须写成calc(var(--spacing-md) * 2)
用 var() 的回退值应对未定义场景
大型项目常有按需加载的 CSS 模块，或 JS 动态插入样式逻辑。这时某个 var(--font-size-h2) 可能还没被声明，浏览器不会报错，但会渲染成默认值（比如 16px），导致视觉错乱且难以排查。
给 var() 加上回退值是低成本兜底手段：
h2 {
font-size: var(--font-size-h2, 1.5rem);
color: var(--text-heading, #333);
}回退值不是“可有可无的装饰”，而是明确告诉阅读者：“如果这个变量没设，就按这个保底行为走”。这对 CI 构建、灰度发布、AB 测试等场景尤其重要——变量缺失时表现可控，而不是随机失效。
变量命名要反映设计系统层级，而非技术实现
别写 --btn-bg-hover 这种绑定具体元素和状态的名字。大型项目里按钮样式可能被复用在标签页、筛选项甚至 toast 提示里。一旦某天交互逻辑变了，“hover 背景”不再只属于按钮，这个变量名就立刻失焦。
推荐按设计系统抽象层级来命名：
- 基础层：
--color-blue-500、--space-4（对应 Figma/Design Token 命名） - 语义层：
--color-primary、--space-content（业务含义，可被多组件引用） - 组件层：
--card-border-radius（仅限该组件内部使用，不对外暴露）
真正难的不是写变量，而是保持命名体系的一致性。只要有人开始混用 --primary 和 --brand-color，整个变量表就迅速退化为“需要查文档才能懂的密码本”。
