在 :root 中定义语义化 CSS 变量并用 var() 引用，是统一管理品牌色最轻量可靠的方式；必须用 :root 确保全局可继承，避免组件内重复定义，fallback 应链式引用其他变量而非写死颜色，优先选用 hsl() 便于动态推导变体，且需覆盖伪元素、SVG 和第三方组件等易漏场景。
直接在 :root 里定义语义化变量，用 var() 引用，是统一管理品牌色系最轻量、最可靠的方式——它不依赖构建工具，运行时可改，主题切换零成本。
为什么必须用 :root 而不是随便一个选择器
自定义属性的作用域由声明位置决定。:root 是文档根元素（等价于 html），它的继承链覆盖整个 DOM，所有后代元素都能读取。如果写在 .header 或 body 里，子组件可能因选择器优先级或嵌套层级丢失继承，导致 var(--brand-primary) 计算为 initial 或 fallback 值。
- 别在组件内部重复定义
--brand-primary，会造成值不一致和维护混乱 - 禁止在
:root中写color: var(--brand-primary)—— 这条声明无效，:root不是渲染上下文，不能直接应用样式 - 若需局部覆盖（如暗色模式），用
html.dark-mode或[data-theme="dark"]重写变量值，而非新建一套变量名
var() 引用时 fallback 值怎么设才安全
fallback 是当变量未定义或为空时的兜底值，但它不是“备用颜色”，而是 CSS 层级里的容错机制。错误做法是写成 var(--brand-primary, #007bff) —— 看似稳妥，实则埋下隐患：一旦变量名拼错（比如写成 --brand-prmiary），CSS 会静默使用 #007bff，你根本收不到报错提示。
- fallback 应该是另一个已定义的原子变量，例如
var(--brand-primary, var(--color-gray-500)) - 避免 fallback 写死十六进制或命名色，否则破坏变量体系一致性
- 开发阶段可临时设为
var(--brand-primary, red)辅助调试，上线前必须清理
颜色值选 hsl() 还是 #xxx？关键看是否需要推导变体
如果你只做静态品牌色，#2563eb 完全可用；但一旦涉及状态色（hover/active/disabled）、明暗适配（light/dark mode）、或设计系统后期调整饱和度/亮度，hsl() 就不可替代。
立即学习“前端免费学习笔记（深入）”；
- 主色固定色相 H（如
--brand-hue: 220），再通过hsl(var(--brand-hue), 70%, 50%)生成基础色 - 用
calc()动态微调：比如hsl(var(--brand-hue), 70%, calc(50% - 10%))得到更浅的 hover 色 - 十六进制无法参与运算，
rgb()单位拆分麻烦，hsl()天然支持语义化调节
哪些地方最容易漏掉变量引用，导致“伪统一”
变量定义了，不代表颜色就真统一了。常见漏点集中在非标准属性、伪元素、第三方组件覆盖层：
-
::placeholder、::selection、::before/::after的color或background必须显式写var(--text-muted) - SVG 内联样式（如
fill="#2563eb"）不会响应 CSS 变量，需改为fill: var(--brand-primary)并确保 SVG 在 HTML 内联或使用<use>引用 - 第三方 UI 库（如 Ant Design、Mantine）默认不读取你的
:root变量，需查文档确认其主题变量前缀，或用:where()+!important（慎用）覆盖
真正统一的标志不是“所有颜色都用了 var()”，而是改一个 --brand-primary 后，按钮、图标、文字、边框、阴影、SVG、甚至 Canvas 绘图色（通过 JS 读取）全部联动更新——这要求从设计规范源头就拒绝直写色值。
