应优先将高频、语义明确、跨组件复用的颜色纳入变量体系，如主品牌色、文字主色、背景色、边框色、禁用态灰及成功/警告/错误状态色；临时调试色或特定图标硬编码色不应纳入，避免维护混乱。
怎么判断哪些颜色该进变量体系
不是所有颜色都要塞进 --color-primary 这类变量。先筛出高频、语义明确、跨组件复用的颜色：主品牌色、文字主色、背景白/灰、边框色、禁用态灰、成功/警告/错误状态色。像临时调试用的 #ff0000、某个图标里写死的 fill: #999，别一股脑替换——后期维护时反而难定位。
检查方式很简单：在编辑器里全局搜 # 开头的六位/三位色值、rgb(、hsl(，再人工过一遍结果，剔除注释、JS 字符串、第三方库 CSS 文件里的内容。
正则批量替换的实操要点
别直接搜 #333 替换成 var(--color-text) —— 会误伤 #333333 或注释里的 /* #333 is temp */。用带边界和空格匹配的正则更安全：
- 查
color:\s*#333\b→ 替换为color: var(--color-text) - 查
background-color:\s*#fff\b→ 替换为background-color: var(--color-bg) - 查
border-color:\s*#dee2e6\b→ 替换为border-color: var(--color-border)
注意：\b 确保只匹配完整颜色词；\s* 吃掉可能存在的空格；替换前务必 Git commit 或备份文件夹。替换完立刻跑一次视觉回归，重点看表单 focus 边框、按钮 hover、SVG 图标填充是否同步更新。
立即学习“前端免费学习笔记（深入）”；
:root 变量声明位置不能错
所有变量必须定义在 :root 块里，且这个块得在所有样式表加载顺序的最前面（比如放在 main.css 顶部，或 index.html 的 <style> 标签内）。如果写在某个组件的 <style scoped> 里，那它只在那个组件生效，input:focus 这种全局选择器根本读不到。
常见翻车点：
- Vue 单文件组件里写了
:root { --color-primary: #007bff; }—— 无效，:root是全局根元素，不能在局部作用域里重定义 - 多个 CSS 文件都定义了
:root，后加载的会覆盖前面的 —— 统一收口到一个入口文件 - 变量名拼错，比如
--color-text写成--color-tex，Computed 面板里会显示原始var(--color-tex)而不是 RGB 值
伪元素、SVG、第三方组件容易漏
改完常规 color 和 background-color 后，这些地方大概率还挂着硬编码：
-
::before/::after里的content没动，但它们的background或color可能没换 - 内联 SVG 的
fill和stroke属性，得手动加fill: var(--color-icon) - Element Plus 的
.el-button--primary默认不响应你的--color-primary，得在主题映射层写--el-color-primary: var(--color-primary) - disabled 状态下的
input:disabled、button:disabled，常被忽略
最省事的验证方式：打开 DevTools，选中任意一个用了颜色的元素，在 Computed 面板里挨个展开 color、background-color、border-color、fill，看最终值是 RGB 还是 var() —— 是前者，说明那条规则没被变量接管。
变量名一旦开始用，就别中途改。改名意味着全仓库搜索替换 + 设计系统文档同步 + 第三方平台（如 Figma Token）重新导出，成本远高于最初花两分钟想清楚命名逻辑。
