bem通过将主题作为带语义前缀的modifier（如.button--theme-dark）统一收口，隔离主题与状态维度，避免类名冲突和样式失控；结合css自定义属性实现变量覆盖，动态换肤仅需切换类名，html保持不变。
Theming 场景下，BEM 如何避免 class 名冲突
多肤色（如 light/dark/brand-blue）本质是同一组件在不同主题下的视觉变体，传统写法容易把主题类名和功能类名混在一起，比如 .button--dark 和 .button--blue 同时存在时，CSS 层叠顺序、覆盖逻辑极易失控。BEM 把主题作为 Modifier 统一收口，强制所有主题变体都挂靠在同一个 Block 下，例如 .button--theme-dark、.button--theme-brand，从命名上就隔离了「状态」和「主题」两个维度。
常见错误是把主题当 Element 写成 .button__theme-dark——这违反 BEM 原则：Element 必须是结构组成部分，而 theme 不是 DOM 子节点；也有人直接用 .dark .button 这种后代选择器，结果全局污染、无法复用。
- Modifier 必须带语义前缀（如
--theme-），避免--dark这种裸值导致跨项目含义模糊 - 同一 Block 下所有主题 Modifier 应共用同一套基础样式，仅通过变量或小范围重写控制色值、间距等，不重复定义布局
- 禁止在 SCSS 中用
&.dark这类嵌套生成.button.dark，它破坏 BEM 的单类名原则，也丧失 CSS-in-JS 或原子化工具的解析能力
如何用 BEM 支持动态换肤而不改 HTML
BEM 的 Modifier 是纯类名开关，不依赖 DOM 结构或属性，所以换肤只需切换 class 列表，HTML 保持不变。React/Vue 里常用 classNames 或 clsx 动态拼接，例如：className={clsx('button', `button--theme-${theme}`)}，只要 theme 变量更新，类名自动同步。
容易踩的坑是把主题逻辑耦合进组件内部，比如在 Button 组件里硬编码 if (theme === 'dark') return 'button--dark'——这会让 Button 失去跨主题复用能力。正确做法是让父级传入 theme，Button 只负责消费，不判断。
- 主题 Modifier 值必须可枚举、有限（如
theme-light/theme-dark/theme-brand），禁用运行时拼接--theme-${userPref} - 不要为每个主题单独写一套完整样式，而是用 CSS 自定义属性（
var(--color-bg)）配合 Modifier 触发变量赋值，减少重复规则 - 如果用 Tailwind，BEM 类名可作为 wrapper class（如
theme-dark: [&_button]:bg-gray-800），但需确保 BEM 类本身不被 PurgeCSS 误删
BEM + CSS 自定义属性实现主题切换的最小实践
真正落地时，BEM 不是孤立存在的。它和 CSS 变量配合才能轻量支持多肤色。典型结构是：Block 定义默认变量，Modifier 覆盖变量值，Element 消费变量。例如：
.button {
--button-bg: #007bff;
--button-color: white;
background-color: var(--button-bg);
color: var(--button-color);
}
.button--theme-dark {
--button-bg: #333;
--button-color: #fff;
}
.button--theme-brand {
--button-bg: var(--brand-primary);
}
这样写的好处是，新增一个 --theme-accessible 只需加几行变量覆盖，不用复制整套按钮样式。但要注意：CSS 变量作用域是继承链，不能靠 BEM 类名自动隔离；所以必须确保 Modifier 类名应用在 Block 根节点上，否则子 Element 拿不到新变量值。
- 禁止在
.button__label上直接写color: #333，必须依赖var(--button-color) - 如果项目用 PostCSS，可用
postcss-custom-properties回退到静态值，但 BEM 类名仍需保留以支撑 JS 主题切换逻辑 - 服务端渲染时，
data-theme="dark"属性 +[data-theme="dark"] .button选择器虽可行，但会破坏 BEM 的 class-only 约束，建议只作降级方案
--theme-mobile 这种设备相关 Modifier，或者要不要把品牌色抽象成 --theme-brand-a 而非 --theme-blue。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
