推荐使用 CSS 自定义属性（变量）集中管理颜色，定义在 :root 中并语义化命名（如 --color-brand），通过 var() 调用，支持 fallback、动态覆盖与主题切换，兼顾可维护性与兼容性。
把颜色写死在 CSS 里，改一个色要全局搜索替换，容易漏、易出错、协作也麻烦。用 CSS 自定义属性（也就是常说的 CSS 变量）集中管理颜色，才是更可持续的做法。
定义颜色变量：统一放在 :root 里
CSS 变量推荐定义在 :root 伪类中，这样全局都能访问。变量名建议语义化，比如 --color-primary 比 --color-blue-500 更易维护。
- 避免用具体色值命名（如
--blue），优先用用途或角色命名（如--color-brand、--color-success） - 可按功能分组，例如文字色、背景色、边框色、状态色等
- 示例：
:root {
--color-brand: #4a6fa5;
--color-text-primary: #333;
--color-text-secondary: #666;
--color-bg: #fff;
--color-border: #e0e0e0;
--color-danger: #d32f2f;
--color-success: #2e7d32;
}
在样式中使用变量：用 var() 函数调用
在任何支持自定义属性的 CSS 属性中，都可以用 var(--variable-name) 引入变量。
- 可以直接替代颜色值：
color: var(--color-text-primary); - 支持 fallback 值（当变量未定义时的备用色）：
background-color: var(--color-bg, #ffffff); - 可在媒体查询、伪类等上下文中动态覆盖，实现主题切换
支持主题切换：在不同作用域重定义变量
深色模式、品牌换肤等场景，不需要写两套样式。只需在特定选择器内重新赋值变量即可。
立即学习“前端免费学习笔记（深入）”；
- 例如深色模式：
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #121212;
--color-text-primary: #e0e0e0;
--color-border: #333;
}
}
- 或通过 class 切换主题：
body.theme-dark { --color-bg: #1a1a1a; } - 所有引用了
var(--color-bg)的地方会自动响应变化
配合预处理器或构建工具进一步提效
CSS 变量本身是运行时生效的，但和 Sass/Less 或 PostCSS 配合，能兼顾开发体验与兼容性。
- 用 Sass 管理变量 + 输出为 CSS 变量，保留逻辑复用能力
- 用 PostCSS 插件（如
postcss-custom-properties）将 CSS 变量降级为静态值，兼容老浏览器 - 现代项目可直接用原生变量，Chrome 49+、Firefox 31+、Safari 9.1+ 均已良好支持
