不能用.button--brand-a，因其将品牌这一系统级上下文错当组件状态修饰符，导致语义失控、样式无法复用、SSR首屏白屏；正确做法是用html.class="brand-a"限定作用域，通过中间CSS变量解耦品牌与组件逻辑。
多品牌项目里，BEM 本身不直接支持主题切换，必须靠三层变量 + 命名空间隔离 + 修饰符开关协同控制；硬把 brand-a 当 BEM 修饰符塞进按钮类名，会破坏语义、导致样式无法复用、SSR 白屏风险陡增。
为什么不能用 .button--brand-a 这种写法
这不是命名长度问题，而是语义和作用域失控：
-
.button--brand-a暗示“按钮的 a 品牌变体”，但实际它要接管整个按钮的视觉体系（颜色、圆角、阴影、字体），远超修饰符该承担的职责 - 所有基础组件（
input、select、card）都得为每个品牌配一套--brand-x修饰符，CSS 体积指数增长，且无法做原子化复用 - HTML 中若同时存在
class="button button--brand-a"和class="button button--brand-b"，BEM 工具链（如stylelint-selector-bem-pattern）会报错——修饰符必须互斥，不能跨品牌共存 - SSR 渲染时，若服务端未注入正确品牌类名，
.button--brand-a样式根本不会加载，fallback 缺失，首屏白屏
正确做法：用 HTML 类名限定品牌作用域 + 中间变量解耦
品牌控制权必须落在 <html class="brand-a"> 上，所有品牌级变量必须绑定到这个类名下：
- 框架级变量（
--spacing-xs、--radius-sm）定义在:root，不带品牌前缀，所有品牌共享 - 品牌级变量（
--color-primary）只在.brand-a下声明：.brand-a { --color-primary: #0066cc; } - 组件内禁用直接引用
var(--color-primary)，必须走中间变量：button { background: var(--btn-bg, var(--color-primary)); } - 品牌只需覆盖
--btn-bg，不影响--color-primary在其他组件（如header__logo）中的用途
如何让 BEM 修饰符真正响应品牌变化
BEM 修饰符不负责“换皮肤”，只负责“表达角色”；品牌适配靠选择器上下文驱动：
立即学习“前端免费学习笔记（深入）”；
- 禁止写：
.button--primary.brand-a { background: #0066cc; }（跨块组合，违反 BEM） - 正确写法：
.brand-a .button--primary { --btn-bg: #0066cc; }，或 Sass 中用@at-root .brand-a { .button--primary { } } - 所有品牌相关样式必须以
.brand-x为父选择器，避免泄漏到非当前品牌区域 - 若需支持多主题叠加（如深色 + 高对比度），应叠加 HTML 类名：
<html class="brand-a theme-dark">，而非拼接brand-a-dark
构建期 vs 运行时：哪些变量必须在 CSS 构建阶段确定
伪元素、@keyframes、content、SSR 首屏样式，全部依赖构建期输出；JS 注入变量永远滞后：
- 不要用 JS 动态计算 HSL 补色再
setProperty——::before里拿不到 computed style，FOUC 不可避免 - 推荐 PostCSS 插件（如
postcss-hsl-calc）在构建时展开hsl(from var(--primary) calc(h + 180) s l)为静态值 - 品牌变量映射表（如
.brand-a .ui-button→--btn-bg: #0066cc）应在构建时批量生成，而非运行时靠 JS 绑定 - SSR 模板中必须根据请求头 / Cookie 提前写入
<html class="brand-a">，否则首屏无样式
最易被忽略的是中间变量的 fallback 设计：如果 --btn-bg 没设默认值，而品牌 CSS 加载失败或未命中，按钮就会透明——不是颜色不对，是彻底不可见。
