--color-blue-500不是好名字，因为它仅描述颜色而非用途；应改用语义化命名如--text-primary，并分三层组织变量：底层色阶、中层语义映射、顶层主题覆盖，确保可维护性与协作一致性。
为什么--color-blue-500不是好名字
它只告诉你“这是个蓝”，没说谁用、在哪用、起什么作用。设计改主色为紫色时，--color-blue-500名存实亡，所有引用它的var(--color-blue-500)都得手动重查映射关系，grep 会误伤文案里的“blue”单词，也容易漏掉 SVG 内联样式或第三方组件里的硬编码。
怎么起一个真正能用的名字
名字要能回答“这个颜色用在哪、为什么是它”，而不是“它是什么色”。关键看三点：
-
--text-primary比--color-blue-500好——前者明确用途（主文本色），后者只记色值 -
--btn-primary-bg比--main-blue好——绑定组件角色，不耦合 DOM 结构或主题倾向 -
--myapp-color-border-divider比--border-color好——加项目前缀防冲突，二级关键词统一用color方便 IDE 补全
变量必须分层组织，否则迟早失控
把所有变量塞进一个 :root 块里，半年后就是颜色沼泽。必须严格按三层声明，且加载顺序不能错：
- 底层：基础色阶，只写具体值，如
--color-blue-500: #2563eb; - 中层：语义映射，只读底层，如
--color-primary: var(--color-blue-500); - 顶层：主题覆盖，用 class 触发，如
.theme-dark :root { --color-primary: var(--color-indigo-400); }
这样改品牌主色，动中层一行；调蓝阶，只改底层；切深色模式，只改顶层选择器——互不污染。
var(--x, #fff) 的 fallback 容易被误用
fallback 只在变量未定义或值非法时生效，比如 --x: ; 或 --x: inherit; 不触发 fallback；但 var(--x, var(--y)) 是非法语法，整条声明会被浏览器忽略。
常见失效原因：
-
--text-primary拼错成--text-primeary - 变量声明在 CSS 文件靠后位置，而
var(--text-primary)在前面就引用了 - 异步加载多个 CSS 文件，
:root块还没解析完就被引用
DevTools 的 Computed 面板显示 invalid 就是这些原因的信号。别指望嵌套 fallback 救场，它根本不合法。
真正难的不是起名，是让所有人——设计师、前端、新成员——看到 --text-primary 就知道它对应 Figma 里的 “Text / Primary” 图层，且这个约定从第一天就写进协作规范里。没对齐，再好的命名也是单点努力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
