根本原因是DOM未真实添加btn--disabled类名；需检查DevTools确认拼写（双连字符）、用classList.toggle()而非className拼接、构建工具中safelist保留正则、CSS规则须基于基础块如.btn.btn--disabled。
为什么
根本原因不是 BEM 写错了，而是 btn--disabled 这个类名根本没真正写进 DOM。BEM 只是命名约定，浏览器只响应真实存在的 class 字符串。
常见错误包括：element.className = 'btn--disabled'（清空了所有其他类）、React 中 state 更新了但没映射到 class 列表、PurgeCSS 把动态类当未使用删掉了。DevTools 里看到 btn--disabled 被划掉 ≠ 它没在 class 属性里——可能只是 CSS 规则被覆盖，而类名本身并不存在。
- 检查 Elements 面板中元素的
class属性值，确认字符串里真有btn--disabled - 构建工具如 PurgeCSS 需在
safelist中显式保留正则：/btn--(disabled|loading|primary)/ - CSS 规则必须绑定到基础块上：
.btn.btn--disabled，不能只写.btn--disabled（缺少基础块，样式无作用域）
如何安全切换多个 Modifier 类名
用 classList.toggle() 替代字符串拼接，它原子操作、自动去重、不破坏其他类（比如动画库注入的 is-animating 或框架生成的 ng-star-inserted）。
React/Vue 中推荐对象映射，但要分组：尺寸类单选归一，状态类多选共存，基础块类（如 btn）必须始终存在。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
el.classList.toggle('btn--disabled', isDisabled) - ❌ 错误：
el.className += ' btn--disabled'（易重复、无法移除、空格错乱） - React 示例：
clsx('btn', sizeMod, { 'btn--loading': isLoading, 'btn--disabled': isDisabled })
Modifier 能不能直接加在 Element 上？比如 card__title--highlight
语法合法，语义错误。BEM 允许 block__element--modifier，但修饰符必须承载业务状态，而 card__title 是结构角色，不表达“是否高亮”这种状态逻辑。
后果是：状态分散、样式优先级失控（.card--collapsed .card__title 压不过 .card__title--highlight）、测试困难、多人协作时易误改。
- ✅ 正确做法：用
card--highlighted控制整个块，CSS 写成.card--highlighted .card__title - JS 只操作一次：
cardEl.classList.toggle('card--highlighted') - Vue/React 中把状态 props 映射为 Block 级 class，而非分散到每个 Element
多个 Modifier 同时存在时 CSS 怎么写
BEM 不自动合并效果。比如 btn--primary 设背景色，btn--disabled 设透明度和禁用交互，两者共存时若没显式声明组合规则，pointer-events: none 可能被 hover 样式绕过。
禁止写 .btn--primary--disabled（非法 BEM），也不该靠层叠顺序赌谁后加载。
- 显式定义组合态：
.btn--primary.btn--disabled { opacity: 0.4; } - 复杂叠加建议用 CSS 自定义属性接管部分分支：
.btn--disabled { --btn-opacity: 0.4; } - 避免在
btn--loading里叠加filter: blur()或多层box-shadow，高频切换易掉帧
