多业务换肤不能只用html[data-theme]，因其仅适配系统级明暗偏好，无法支撑平行业务品牌（如edu/med）的独立视觉体系，易导致变量重复定义、选择器权重失控及SSR fallback错乱。
多业务换肤不是换个 data-theme 就完事——它要求同一套组件在不同业务线（如「金融后台」「教育管理」「医疗预约」）下呈现完全独立的视觉体系，且不能互相污染。核心难点在于：既要复用 BEM 的语义结构，又要隔离各业务的主题变量作用域。
为什么不能只用 html[data-theme] 做多业务换肤
单个 data-theme 只能表达「系统级偏好」，比如 dark/light；而多业务场景中，data-theme="edu" 和 data-theme="med" 是平行关系，不是明暗变体。直接复用会导致：
-
html[data-theme="edu"] .button--primary和html[data-theme="med"] .button--primary必须重复定义全部变量，无法共享基础色板逻辑 - 一旦某个业务需要同时支持深色+品牌色（如「med-dark」），
data-theme值就爆炸式增长，选择器权重失控 - SSR 渲染时若后端未传入正确
data-theme，所有业务组件 fallback 到同一套默认值，视觉错乱
.block--brand-edu 这类修饰符该不该加在 Block 上
应该，但必须严格限定使用范围：只用于声明「该 Block 属于哪个业务品牌」，不参与颜色定义。例如：
.card { background-color: var(--card-bg); }
.card--brand-edu { --card-bg: #f0f9ff; } /* 仅重置变量 */
.card--brand-med { --card-bg: #f8fafc; }
关键点：
立即学习“前端免费学习笔记（深入）”；
- 修饰符名必须带
brand-前缀，避免和状态类（如--disabled）或主题类（如--dark）混淆 - 禁止写
.card__header--brand-edu—— Element 不得承载品牌语义，否则破坏 BEM 的层级契约 - 所有品牌变量必须有 fallback：
background-color: var(--card-bg, #fff);，防止 JS 未执行时白屏
如何让同一组件在多个业务中复用变量逻辑
靠 CSS 变量的继承链 + 业务容器包裹。不要为每个业务写一套 theme-edu.css，而是用一个统一入口注入变量：
<div class="app-brand-edu"> <header class="header--brand-edu"></header> <main><button class="button--primary">提交</button></main> </div>
对应 CSS：
.app-brand-edu {
--brand-primary: #10b981;
--brand-bg: #f0fdf4;
}
.header--brand-edu {
--header-bg: var(--brand-bg);
}
.button--primary {
background-color: var(--brand-primary);
}
这样做的好处：
- 新增业务只需加一个
.app-brand-xxx容器和几行变量定义，不用动组件内部 - 组件自身（如
.button--primary）完全 unaware 业务身份，只消费变量 - 伪类样式（如
.button--primary:hover）自动继承父级变量，无需重复写.button--primary--brand-edu:hover
构建时如何避免 PurgeCSS 误删业务修饰符
PurgeCSS 默认只保留 HTML 中显式出现的类名，而业务类（如 --brand-edu）可能只在 JS 动态插入，导致被删。解决方案：
- 在
purgecss.config.js的content配置中显式加入业务类名白名单：['--brand-edu', '--brand-med', '--brand-finance'] - 或改用更安全的标记方式：在 HTML 模板中埋一个不可见的占位节点：
<div class="brand-edu-placeholder" style="display:none"></div>，确保 PurgeCSS 能扫描到 - 绝对不要把业务修饰符写成动态拼接字符串（如
class="button--${brand}"），这会让构建工具完全无法识别
最易被忽略的是变量作用域穿透问题：如果某个业务组件嵌套在另一个业务容器里（如教育后台里嵌了个医疗报表模块），父级的 --brand-primary 会覆盖子级变量，必须用 :where() 或更高权重选择器做隔离。
