BEM能缓解大型项目样式失控，因其通过Block__Element--Modifier命名强制样式归属组件、状态与子元素，实现语义唯一性，避免全局污染和权重堆叠。
为什么BEM能缓解大型项目样式失控
因为CSS本身没有作用域，.btn 在任何地方都能被意外覆盖或污染。BEM强制把样式归属绑定到具体组件（Button）、状态（is-loading）、子元素（__icon），让选择器具备语义唯一性，避免靠权重堆叠或!important硬压。
它不是“写得更长”，而是用命名规则代替嵌套深度——不靠.modal .header .title定位，而用modal__title直指目标，降低维护时的推理成本。
BEM命名必须遵守的三条铁律
错一个字母就等于放弃BEM带来的可维护性。常见错误是混用中划线和下划线，或漏掉双下划线/双中划线分隔符。
-
Block名全小写、中划线连接：user-card✅，UserCard❌，userCard❌ -
Element用双下划线：user-card__avatar✅，user-card_avatar❌，user-card-avatar❌ -
Modifier用双中划线：user-card--large✅，user-card-large❌，user-card_is-large❌
别图省事缩写：btn__txt 不如 button__text —— 后者在全局搜索时不会漏掉其他含 txt 的变量或类名。
立即学习“前端免费学习笔记（深入）”；
如何在React/Vue里自然落地BEM
直接写className="user-card__avatar"没问题，但手动拼接modifier容易出错。推荐用工具函数封装逻辑：
const bem = (block) => {
return (element, modifier) => {
if (element && modifier) return `${block}__${element}--${modifier}`;
if (element) return `${block}__${element}`;
if (modifier) return `${block}--${modifier}`;
return block;
};
};
// 使用
const cn = bem('user-card');
<div className={cn('avatar', 'round')}>...</div> // → user-card__avatar--round
注意：不要把BEM当CSS-in-JS用——它不解决动态样式注入问题，只管命名一致性；style 属性或 CSS Modules 仍需单独管理。
哪些场景BEM反而会拖慢开发
BEM不是银弹。以下情况硬套会增加冗余、掩盖真实问题：
- 纯工具类（
u-text-center、u-mt-8）—— 这类应走原子化CSS，而非塞进BEM体系 - 第三方UI库组件（
ant-design、chakra-ui）—— 它们已有自己的命名策略，强行重写Button为my-button只会割裂生态 - 临时实验性页面（A/B测试页、运营活动页）—— 样式生命周期短，BEM带来的约束收益远低于初始化成本
真正需要BEM的，是那些持续迭代超过6个月、多人协作、组件复用率高的核心业务模块。其它地方，先跑通逻辑，再考虑要不要加一层命名纪律。
最常被忽略的一点：BEM只管怎么叫，不管怎么写。很多人写了form__input--error，却还在CSS里写form__input--error:focus触发状态，结果发现焦点样式被其他全局:focus规则覆盖——这时候该检查的是选择器优先级和层叠顺序，不是怪BEM没用。
