多个BEM修饰符可共存，但需HTML显式写入、CSS用单类名选择器、各修饰符控制不同样式维度、叠加态须显式声明、构建工具需配置safelist防误删。
多个BEM修饰符能同时加在元素上，但样式不自动叠加——浏览器不会“理解”语义，只按CSS规则顺序和属性冲突情况渲染。关键不是“能不能用”，而是怎么写HTML、怎么写CSS、怎么防构建工具误删。
修饰符必须用单类名选择器，且不能共用同一属性
所有修饰符规则必须写成 .btn--primary { }，绝不能写成 .btn .btn--primary { }。后者权重低、违背BEM、且无法保证独立生效。
- 如果
.btn--primary和.btn--large都设置了padding，后声明的那个会覆盖前一个，哪怕它们语义毫无关系 - 推荐分工：
.btn--primary控背景色/文字色，.btn--large控min-height和font-size，.btn--disabled控opacity和pointer-events - 避免在多个修饰符里重复定义
background-image：任一路径 404 或逗号错位，整条声明会被浏览器丢弃
叠加态必须显式声明，不能靠类名共存自动生效
.btn--disabled.btn--loading 这种组合只是两个类名同时存在，不代表新效果自动产生。若没单独写规则，可能禁用透明度和加载动画互相干扰。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- HTML 必须显式写全：
class="btn btn--primary btn--disabled btn--loading"，不能拼错、漏空格或被 JS 清空 - CSS 中分别定义基础行为：
.btn--disabled { opacity: 0.5; pointer-events: none; }，.btn--loading::after { content: "…"; } - 叠加态单独声明：
.btn--disabled.btn--loading { opacity: 0.6; }，避免视觉歧义 - 禁止写
.btn--primary--disabled这类嵌套修饰符——它不是合法 BEM，会被解析为新块名
构建工具容易误删动态添加的修饰符
PurgeCSS、cssnano 等默认只扫描模板中静态出现的 class，JS 动态添加的 .btn--loading 或 .btn--error 极易被删掉，导致样式彻底失效。
立即学习“前端免费学习笔记（深入）”；
- 在 safelist 中用正则显式保留：
/btn--(loading|disabled|success|error)/ - 禁用
cssnano的mergeLonghand，否则btn--primary btn--large可能被压缩成只剩一个 - 检查 DevTools Elements 面板，确认目标元素的
class属性里真有对应字符串
最常被忽略的点是：BEM 不执行任何逻辑，它只是命名契约；所有“叠加失效”问题，90% 都出在 HTML 没写对、CSS 没写正交、或构建配置没兜住动态类名——而不是修饰符本身不支持多用。
