应使用 html[data-brand="a"] 和 html[data-brand="b"] 作用域声明css变量，而非重复:root；所有组件通过 var(--color-primary) 引用，切换品牌只需修改html的data-brand属性，确保变量隔离、无覆盖、零冗余。
如何让同一套 CSS 变量适配多个品牌色值
不能靠复制粘贴多份 :root 块，必须用属性选择器或 data 属性做作用域隔离。每个品牌对应一个独立的根级标识，比如 data-brand="a" 或 data-brand="b"，所有变量定义都挂在这类选择器下，而非裸露的 :root。
常见错误是写两套 :root { --color-primary: #0066cc; } 和 :root { --color-primary: #2563eb; }——CSS 不允许重复声明同名选择器，后一份会直接覆盖前一份。
正确做法：
- 统一在
html[data-brand="a"]和html[data-brand="b"]下声明变量，确保继承链不交叉 - 所有组件样式中只写
color: var(--color-primary);，不带任何品牌前缀 - 切换品牌只需改
，无需动 JS 或 CSS 逻辑
为什么不能用 CSS @layer 或 Tailwind theme.extend 直接管理多品牌
@layer 是编译时组织规则的语法，无法运行时切换；theme.extend 生成的是静态 utility 类，比如 bg-brand-a-primary 和 bg-brand-b-primary 会同时打进包里，PurgeCSS 无法安全剔除未使用的品牌类，导致体积膨胀。
更关键的是：它们都不支持“同一 class 名映射不同值”的动态语义。你想要的是 text-brand-primary 在品牌 A 下是深蓝，在品牌 B 下是墨绿——这只能靠 CSS 变量 + 作用域覆盖实现。
实操建议：
- 禁用
tailwind.config.js中对多品牌颜色的直接扩展（如不要写colors: { brandA: {}, brandB: {} }） - 把 Tailwind 当作“工具类生成器”，只用它输出基础原子类（
px-4、rounded-md），品牌相关样式全交给 CSS 变量驱动 - 如果必须用 Tailwind 表达品牌差异，仅限于极简场景，例如
bg-[var(--color-bg)]，且确保该变量已在对应data-brand下正确定义
如何避免变量命名冲突和跨品牌泄漏
变量名本身不带品牌上下文，但作用域决定了它生效的范围。泄漏通常发生在两个地方：一是子组件没重置变量，二是第三方库样式意外继承了父级 data-brand 的变量。
防泄漏要点：
- 每个品牌作用域内，显式重置所有可能被继承的变量，哪怕值相同：
html[data-brand="a"] { --color-text: #1a1a1a; --color-bg: #ffffff; } - 对 iframe 或 Web Components，不能依赖外部
data-brand，需手动将变量透传进:host或iframe的style属性 - 禁止在公共工具类（如
.sr-only、.visually-hidden）中引用品牌变量，这类类应保持完全中性
构建时如何安全注入品牌配置而不硬编码
开发时靠 HTML 标签属性切换，上线后品牌配置得进构建流程。不能把 data-brand="a" 写死在模板里，而应由构建脚本根据环境变量注入。
例如 Vite 项目，在 vite.config.ts 中读取 process.env.BRAND，用 transformIndexHtml 插件把对应属性插入 标签；Webpack 则用 html-webpack-plugin 的 templateParameters 注入。
注意：
- 变量文件（如
tokens.css）必须是纯 CSS，不含 JS 或构建时逻辑，否则无法被 PostCSS 插件或 CDN 缓存稳定识别 - 如果品牌配置含敏感信息（如定制字体 URL），不要通过 CSS 变量暴露，应走 JS 运行时加载
- 本地开发时，可用 URL 参数临时覆盖，比如
?brand=b，配合简单脚本写入document.documentElement.setAttribute
最易被忽略的一点：CSS 变量作用域切换是同步的，但浏览器重绘有延迟。若在 JS 中快速切换 data-brand 又立刻读取 getComputedStyle，可能拿到旧值。需要加 requestAnimationFrame 等待样式计算完成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
