直接塞品牌色进语义变量会出问题，因导致换主色需多处修改、深色模式无法独立调参、组件微调只能覆盖或复制变量；应采用基础色→语义色→组件色三层结构，用嵌套var()与合理fallback实现解耦。
为什么直接把品牌色塞进语义变量里会出问题
很多人一上来就写 --color-primary: #007bff;，然后所有按钮、标题、边框都直接 color: var(--color-primary); —— 这看似省事，但实际埋了三个雷：换主色要改多处、深色模式无法独立调参、组件微调时只能覆盖或复制变量。真正解耦的关键不是“用变量”，而是“分层引用”。
基础色 → 语义色 → 组件色的三层结构怎么搭
必须把原始品牌值（设计规范给的）和用途描述（业务代码要的）彻底分开。推荐这样组织：
-
--color-brand-primary：只存原始值，比如75, 0, 130（Indigo 的 RGB），不带任何用途暗示 -
--color-text-primary：语义层，定义为rgb(var(--color-brand-primary))或带透明度/对比度调整，比如rgb(var(--color-brand-primary) / 0.87) -
--button-primary-bg：组件层，可复用语义变量，也可按需覆盖，比如暗色模式下它可能指向--color-brand-primary-dark
这种结构下，设计改主色只需动 --color-brand-primary；文案团队想调文字对比度，只改 --color-text-primary 的 alpha；按钮组件自己要加 hover 偏移，也不影响其他地方。
var() 嵌套和 fallback 怎么写才不翻车
嵌套 var() 是解耦核心，但容易漏 fallback 或写错层级：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
color: var(--color-text-primary, #333);—— fallback 用了固定值，失去语义继承能力 - 正确写法：
color: var(--color-text-primary, rgb(var(--color-brand-primary) / 0.87));，fallback 本身也是变量表达式 - 避免深层嵌套超过两层，比如
var(--a, var(--b, var(--c)))，Chrome 虽支持，但调试时 devtools 显示为invalid，排查困难 - 如果用
color-mix()动态生成中性色，fallback 必须是完整 color 函数，不能只写 hex，否则降级失败
JS 动态切换主题时，哪些变量必须用 setProperty 更新
只有写在 :root 上、且被 var() 直接引用的基础色变量，才值得用 JS 改。语义色和组件色通常不需要 JS 干预：
- 该改：
document.documentElement.style.setProperty('--color-brand-primary', '255 99 71');（番茄红） - 不该改：
--color-text-primary—— 它靠 CSS 自动重算，改了反而破坏一致性 - 暗色模式切换建议用媒体查询 +
:root[data-theme="dark"]双保险，避免 JS 切换瞬间闪白 - 注意：IE 不支持
var()嵌套，若需兼容，基础色变量必须双写，如color: #007bff; color: rgb(var(--color-brand-primary));
最常被忽略的是语义层变量的“不可变性”——它们不是配置项，而是计算结果。强行用 JS 改，等于绕过设计系统逻辑，后续维护成本指数上升。
