17370845950

使用CSS变量在:root中统一管理HEX颜色值是最轻量可控的落地方式，需按语义分层命名、集中定义、预留主题切换能力，并配合设计标注与前端校验闭环执行。

直接用 CSS 变量（:root 中定义）统一管理 HEX 颜色值，是落地颜色规范最轻量、最可控的方式。核心不是“能不能用”，而是“怎么定义才不翻车”——既要覆盖设计系统常见需求，又要兼顾开发可维护性与主题切换潜力。

颜色变量按语义分层命名，不按视觉值

避免写 --color-ff6b35 或 --color-orange-500 这类强耦合具体值或设计工具层级的命名。应聚焦用途：

• 基础色板：如 --color-primary、--color-success、--color-warning —— 对应按钮主色、操作成功、警示等业务含义
• 中性色系：如 --color-text-primary、--color-bg-surface、--color-border-divider —— 描述使用场景，而非“黑/灰/白”
• 状态色：如 --color-state-hover、--color-state-disabled —— 明确是交互反馈，不是独立色卡

HEX 值统一收口在 :root，禁止散落在组件里

所有 HEX 定义只出现在全局根作用域，例如：

:root {
  --color-primary: #4a6fa5;
  --color-primary-hover: #3a5a8c;
  --color-text-primary: #212121;
  --color-bg-surface: #ffffff;
  --color-border-divider: #e0e0e0;
}

组件样式中只用变量，例如：background-color: var(--color-primary);。这样换主题时只需覆盖 :root，无需搜索全项目 HEX。

预留浅色/深色主题切换能力，即使当前只做一套

用 @media (prefers-color-scheme: dark) 或自定义 class 控制变量重写，提前留好扩展位：

:root {
  --color-bg-surface: #ffffff;
  --color-text-primary: #212121;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-surface: #121212;
    --color-text-primary: #e0e0e0;
  }
}

不强求立刻实现暗色模式，但变量结构和命名要支持它——比如不用 --color-white 而用 --color-bg-surface。

配合设计稿标注与前端校验，闭环落地

设计师输出规范时，同步提供变量名与 HEX 对照表；前端可借助工具（如 Stylelint 插件或简单脚本）扫描 CSS 文件，报错提示 “检测到未声明的 HEX 值 #ff5722”，倒逼变量使用习惯。