应使用语义化类名（如bg-error）而非硬编码颜色名（如bg-red-500），通过css变量（var(--color-error)）实现主题动态切换、无障碍合规与设计系统解耦，避免命名污染、维护成本上升及运行时不可变问题。
硬编码颜色名在类名里会导致主题切换失效
比如写 .btn-primary-red 或 .card-bg-blue，这类类名把颜色和语义绑死，一旦设计系统要求深色模式下主按钮变紫、浅色模式下变蓝，你得新建一堆类、改所有模板引用、甚至重写 JS 逻辑判断——而不是只改一个变量。
更麻烦的是，prefers-color-scheme 媒体查询或 [data-theme="dark"] 属性选择器根本没法覆盖这种命名，因为类名本身不携带可计算的上下文。浏览器不会因为主题变了，就自动把 .bg-green 解释成 hsl(120 60% 40%)。
- 类名里的颜色是静态字符串，不是值，无法被 CSS 变量或
color-mix()调用 - 构建工具（如 PostCSS）压缩时可能保留类名但删掉对应样式规则，造成“有类无色”
- 无障碍检测工具通常忽略类名中的颜色词，不会校验对比度是否达标
类名含颜色会破坏组件复用与语义解耦
当一个按钮组件对外暴露 class="btn btn--danger-red"，使用者其实被迫理解“red = danger”，但设计规范可能规定：错误态在深色模式下用 hsl(0 90% 55%)，在高对比度模式下用 #d32f2f——这些都不等于 red，也不该由类名决定。
真实协作中，有人写 text-gray-500，有人写 text-grey-500，IDE 搜索 gray 就漏掉一半；CI 流水线里不同版本的 Sass 解析器对大小写容错性不一致，某次构建后 LightSteelBlue 突然失效。
- 类名应表达用途（
text-disabled），而非视觉结果（text-lightblue） - 组件内部不应依赖类名推断颜色，而应通过
var(--color-text-disabled)获取 - 第三方 UI 库若允许传
color="tomato"这类 prop，本质是把命名色泄漏到组件 API 层，污染下游
硬编码类名让 CSS 变量失去作用域控制力
如果项目已定义 :root { --color-error: #f56c6c; }，但你在某个组件里仍写 .error-tip { color: red; }，那这个 red 就完全绕过主题管控体系。改 --color-error 不会影响它，也无法用 color-mix(in srgb, var(--color-error) 50%, white) 动态生成悬停态。
更隐蔽的问题是：Sass/Less 编译后，.btn--primary { background: $primary-color; } 看似安全，但一旦变量被 JS 动态修改（比如用户切换主题），编译后的 CSS 已固化，无法响应。
- 所有硬编码颜色（十六进制、rgb、命名色）都必须被
var()包裹才能参与运行时计算 -
currentColor是唯一例外，但它依赖父级color值，不能替代语义变量 - PostCSS 插件
stylelint-color-no-hex和stylelint-color-no-named必须接入 CI，否则这类泄漏会悄无声息蔓延
为什么连 bg-red-500 这类 Tailwind 式类名也需谨慎
Tailwind 的 bg-red-500 本质仍是硬编码映射，只是换了个形式。它把颜色值藏在配置文件里，但类名本身仍泄露了具体色阶——-500 是设计系统的内部编号，不是语义。当设计师说“错误背景要更醒目”，你得去改配置、重生成所有类、更新文档、通知所有人别再用 bg-red-500，而不能直接改 --color-error-bg。
真正可持续的做法是：用 bg-error 这类语义类名，背后由 background-color: var(--color-error-bg) 驱动，变量值由主题配置注入。这样即使设计系统从 Material 切换到 Fluent，类名不变，只需换变量定义。
- Tailwind 的
theme.extend.colors若直接填red: "#ef4444"，依然属于硬编码，应改为error: "var(--color-error)" - 使用
@apply时避免写@apply bg-red-500，而应@apply bg-error并确保该类已绑定变量 - VS Code 插件
css-var-autocomplete可提示可用变量，但无法阻止手写bg-[#ef4444]这种 inline 值
getUserData_200OK 听起来荒谬，但 btn-danger-red 其实一样。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
