bem修饰符共存时样式覆盖的根本原因是声明顺序与特异性未对齐，而非bem不支持叠加；需用单类名选择器、避免同属性重复定义、显式处理叠加态、禁用css压缩误删、确保dom真实同步类名。
多个BEM修饰符共存时，CSS规则为什么互相覆盖？
根本原因是修饰符样式声明顺序和特异性（specificity）没对齐，不是BEM本身不支持叠加。浏览器按CSS文件中规则出现的顺序、以及选择器权重来决定最终生效样式。比如 .button--primary 和 .button--large 都设置了 padding，后声明的那个会覆盖前一个——哪怕它们语义上完全正交。
- 所有修饰符规则必须用单类名选择器：
.button--primary { }，不能写成.button .button--primary { }（权重低且违背BEM） - 避免在不同修饰符里重复定义同一属性（如都设
background或border-radius），否则必然冲突 - 若需叠加控制（如
.button--primary定义颜色，.button--large定义尺寸），确保它们修改的是不同维度的样式 - 构建工具如 cssnano 的
mergeLonghand可能误删重复类名，导致.button--primary.button--large被压缩掉一个，务必在配置中禁用
如何安全地组合 .button--disabled 和 .button--loading
这两个状态常同时出现（例如请求超时后按钮既禁用又显示加载态），但它们不是互斥关系，而是可正交叠加的业务状态。关键不在“能不能加”，而在“加了之后样式是否可控”。
- HTML 中显式写全：
class="button button--primary button--disabled button--loading"，不拼接、不省略基础类button - CSS 中分别定义：
.button--disabled重置pointer-events、opacity、cursor；.button--loading控制position: relative和伪元素动画，不碰背景或文字色 - 叠加态需单独处理：写
.button--disabled.button--loading { opacity: 0.5; }显式覆盖默认禁用透明度，避免视觉歧义 - PurgeCSS 等工具可能把动态添加的修饰符当“未使用”删掉，safelist 必须包含正则
/button--(disabled|loading|error)/
为什么 .button--primary.button--large 比 .button--primary-large 更可靠
.button--primary-large 看似简洁，实则是非法 BEM 修饰符——它把两个语义合并成一个新名字，破坏了“单一职责”和“可预测性”。一旦设计改版要求所有 --large 按钮统一调高行高，你得全局搜索替换，而不是只改一处 CSS 变量。
-
.button--primary是功能变体，.button--large是尺寸变体，二者属于不同抽象层级，应独立存在 - 组合写法允许自由排列：
.button--large.button--primary和.button--primary.button--large效果一致，阅读顺序不影响渲染 - 禁止嵌套修饰符（如
.button--primary--loading），这会被解析为一个新块名，调试时 DevTools 找不到对应 CSS 规则 - 如果真需要“主按钮+大号+禁用”三合一效果，靠 HTML 加三个类 + CSS 分别定义 + 必要时叠加微调，比造新类名更易维护
修饰符叠加时最常被忽略的 DOM 同步问题
再严谨的 CSS 规则也救不了没真实出现在 DOM 上的类名。90% 的“修饰符不生效”问题，根源是 JS 没真正更新 className 或 classList。
- 检查 Elements 面板，确认元素的
class属性里确实包含button--disabled，而不是button-disabled或button_disabled - React/Vue 中别只更新 state，忘了把 state 映射到 className 字符串里（常见于条件拼接漏空格）
- 禁用直接赋值
el.className = 'button ' + (isDisabled ? 'button--disabled' : '')，改用el.classList.toggle('button--disabled', isDisabled) - 过渡动画未结束就切换状态，可能导致 class 切换被丢弃；建议用
setTimeout或transitionend事件对齐时机
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
