多个BEM修饰符可共存，但需确保HTML中真实写入类名、CSS用单类名选择器、各修饰符控制不同样式维度，并显式声明叠加态规则，否则样式不会自动生效。
修饰符叠加不是自动生效，而是靠类名真实存在 + CSS正交声明
多个BEM修饰符（如 .btn--primary、.btn--disabled、.btn--loading）能共存，但浏览器不会“智能合并”它们的效果。样式是否生效，只取决于三件事：HTML里class属性是否真包含这些字符串、CSS规则是否用单类名选择器书写、以及各规则修改的属性是否互不冲突。
- 检查 DevTools Elements 面板，确认元素上写的是
class="btn btn--primary btn--disabled btn--loading"，而不是btn--primary-disabled或漏了空格 - 所有 CSS 规则必须写成
.btn--disabled { }，不能写成.btn .btn--disabled { }（权重低，且违背 BEM） - 如果两个修饰符都设置了
background-color，后声明的那个会覆盖前一个——这不是 bug，是 CSS 层叠机制本身
不同修饰符必须控制不同维度的样式
叠加失效最常见的原因是语义和样式没对齐：比如 .btn--primary 控颜色，.btn--large 控尺寸，这没问题；但如果两者都改 padding 或 border-radius，就必然打架。
- 推荐分工：
.btn--primary管背景色/文字色，.btn--large管min-height和font-size，.btn--disabled管opacity和pointer-events - 避免在多个修饰符里重复定义同一属性（尤其是
background-image），多背景图语法容错极低，任一修饰符中路径 404 或逗号错位，整条声明会被浏览器丢弃 - 需要视觉叠加时（如图标 + 加载动效），用
background-blend-mode显式控制混合方式，而不是指望浏览器自动处理
叠加态必须显式声明，不能靠“自动组合”
.btn--disabled.btn--loading 这种组合不会自动产生新效果。它只是两个独立类名同时存在，除非你专门写一条规则覆盖默认行为，否则可能禁用透明度和加载动画互相干扰。
- 必须单独写：
.btn--disabled.btn--loading { opacity: 0.5; }，否则.btn--disabled的opacity: 0.4和.btn--loading的伪元素可能视觉冲突 - 禁止写
.btn--primary--disabled这类嵌套修饰符——它不是合法 BEM，会被解析为新块名，且无法与.btn--loading自由组合 - 构建工具（如 PurgeCSS）默认只扫描模板中的静态类名，JS 动态添加的
.btn--loading极易被删掉，需在safelist中加正则：/btn--(loading|disabled|error)/
动态类名拼接最容易出错的三个环节
React/Vue 中手拼 className 是最常翻车的地方，错误往往无声无息，只表现为样式突然消失。
立即学习“前端免费学习笔记（深入）”；
- 拼接前校验值非空：
mod && `btn--${mod}`，避免生成无效的btn--类名 - 过滤非法字符：
mod.replace(/[^a-z0-9-]/g, '')，防止btn--primary@2x这类非法类名 - 禁用 cssnano 的
mergeLonghand，否则btn--primary btn--large可能被压缩成只剩一个
真正容易被忽略的，是类名是否在组件卸载或状态切换时被及时清理——比如请求失败后移除了 btn--loading，却忘了重置 btn--error，导致残留类名持续影响样式。
