必须用 --color-primary 而不是 #007bff 当颜色在三个以上组件、两种以上主题或需 js 动态修改时复用，硬编码会导致维护灾难，是维护底线而非推荐。
什么时候必须用 --color-primary 而不是 #007bff
当一个颜色在三个以上组件、两种以上主题（如浅色/深色）、或至少一处需要 JS 动态修改（比如用户点击切换品牌色）中复用时，硬编码就该退场了。这不是“推荐”，是维护底线：改一个色要 grep 全项目、漏掉 svg fill 或 ::before content 里的值、伪类里重复写死——这些都不是疏忽，是硬编码结构注定的失败路径。
常见错误现象：.btn { color: #333; } .card-title { color: #333; } .modal-header { color: #333; } 看似一致，但深色模式下全得手动加媒体查询覆盖；更糟的是，某天设计师说“禁用文字统一用灰度 500”，你得改三处且无法保证没遗漏。
- 适用场景：主色、语义色（
--color-text-disabled）、边框分隔色（--color-border-divider）、图表调色盘（--highcharts-color-0） - 禁用场景：临时调试色（
/* DEBUG */ border: 2px solid red;）、单次使用的 SVG 图标内联色（<path fill="#f00"></path>，除非该图标需主题响应） - 性能影响：CSS 变量本身无运行时开销，但大量嵌套
var(--a, var(--b, var(--c)))会轻微拖慢解析，建议层级 ≤ 3
var(--color-primary) 必须带 fallback 吗
必须。不带 fallback 的 var(--color-primary) 在变量未定义或加载顺序错乱时，浏览器直接计算为空字符串，导致 color: 或 background: 失效，文本瞬间不可见或背景塌陷——这不是“可能出问题”，是必然闪屏。
正确写法是 color: var(--color-text, #333);，其中 #333 是字面量 fallback，不能是另一个变量（var(--fallback-color)），也不能是模糊值（如 red）。
- fallback 值应选 WCAG 可接受的保底对比度（如正文用
#333，背景用#fff） - :root 必须声明默认值，哪怕只是占位：
:root { --color-primary: #007bff; }，否则媒体查询里的覆盖（如[data-theme="dark"] { --color-primary: #6a5acd; }）毫无意义 - 工具链能拦住部分问题：Stylelint 插件
plugin/stylelint-color-function-unit可检测rgb(255, 0, 0)和rgb(255 0 0 / 0.5)混用，但拦不住漏写 fallback
为什么 hsl(var(--hue), 80%, 60%) 比 #4a90e2 更适合响应式
HSL 分离了色相（hue）、饱和度（saturation）、明度（lightness）三个维度，而十六进制是扁平封装。响应式真正要调的往往只是明度：深色模式下调 --lightness 从 60% → 30%，所有衍生色自动变暗；禁用态只需 hsl(var(--hue), 80%, calc(var(--lightness) * 0.7))，不用手算新 hex 值。
硬编码 hex 值在断点或媒体查询里只能靠经验覆盖，比如 @media (prefers-color-scheme: dark) { .btn { background: #2d517b; } }，但这个 #2d517b 是否真和原色视觉协调？没人能保证。
- 关键差异：HSL + CSS 变量支持
calc()动态计算，hex 不支持 - 兼容性注意：
hsl(200 80% 60%)新语法（空格分隔、无逗号）已获 Chrome/Firefox/Safari 支持，但旧版 Safari 需回退到hsl(200, 80%, 60%)；可用 PostCSS 插件自动补全 - 别把 HSL 当万能解药：色相偏移（如主题换紫）仍需改
--hue，但比全局替换 hex 少 90% 工作量
类名里写 bg-red-500 和用 var(--color-error) 的根本冲突
类名是静态标识符，CSS 变量是运行时值，二者不在同一抽象层。写 class="alert bg-red-500" 相当于把设计决策刻进 HTML 结构里：一旦深色模式要求错误背景用 #b3261e，你得要么新建 bg-red-500-dark 类（爆炸式增长），要么 JS 动态切 class（破坏 SSR 和可访问性）。
而 background-color: var(--color-error); 把颜色逻辑完全收口到 CSS 层，HTML 只表达语义（class="alert"），主题切换只需改一行 :root 变量。
- 真实协作坑：有人搜
bg-red，有人搜bg-error，IDE 和 CI 流水线对大小写/拼写敏感度不一，text-grey-500和text-gray-500可能同时存在 - 第三方库集成风险：若 UI 库允许传
color="indigo"这类 prop，本质是把命名色泄漏到组件 API，绕过你的变量体系 - 最隐蔽的失效点：Sass 编译后生成的
.btn { background: $primary-color; }看似安全，但 JS 动态改--primary-color完全无效——编译已固化
最难的从来不是语法对不对，而是十个人在同一个 PR 里改 :root 时，有人漏加 fallback，有人把 --color-primary 写成 --primary-color，有人在组件里重复声明同名变量覆盖全局——这些没法靠工具全自动拦截，得靠 Code Review 卡住入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
