BEM通过block__element--modifier结构声明样式归属关系来防重名，而非单纯加长名称；其核心是让类名自带上下文，实现模块级隔离与语义化约束。
传统CSS命名容易重名，根本原因在于CSS没有作用域——.btn、.title、.list 这类泛化类名一旦在全局出现多次，就必然竞争、覆盖、误生效。BEM不是靠“起更长的名字”来防重，而是用 block__element--modifier 结构强行声明归属关系，让每个类名自带上下文。
为什么 .btn 一写就冲突
CSS解析器不关心你写的是“登录按钮”还是“删除按钮”，它只认类名字符串。只要两个地方都用了 .btn，样式规则就会叠加或覆盖：
- 团队A写了
.btn { padding: 8px; }，团队B写了.btn { padding: 12px; }，最终生效的取决于加载顺序或选择器权重 - 第三方库（如Ant Design）也导出
.btn，你的局部修改可能被它重置 - 用后代选择器临时补救，比如
.modal .btn，但HTML结构一变（比如 modal 换成 dialog），样式就静默失效
search-form__submit-button--disabled 是怎么防覆盖的
这个类名不是“为了长而长”，它明确表达了三层信息：
-
search-form：这个样式只属于 search-form 这个功能模块，和其他任何 form 或 button 无关 -
__submit-button：它是 search-form 的一部分，不能脱离该块单独复用 -
--disabled：这是该按钮的状态变体，不是新组件，必须和基础类search-form__submit-button共存
即使另一个页面也有搜索框，只要它的 Block 名是 advanced-search，那它的按钮就是 advanced-search__submit-button，天然隔离。
立即学习“前端免费学习笔记（深入）”；
迁移时最容易踩的坑：修饰符写错位置或漏基础类
BEM对书写顺序和组合方式有隐性约束，手写或工具链没卡住就会出问题：
- 错：
search-form--submit-button（把--用在 block 和 element 之间，语义断裂） - 错：
search-form__submit-button--disabled却没写search-form__submit-button基础类，导致样式不生效 - 错：在Sass里写
.search-form { &--disabled { ... } }，但 HTML 里只加了search-form--disabled，漏掉 block 本身，编译后规则无法匹配 - 错：用
:global(.search-form__input)在 CSS Modules 中逃逸作用域，等于又开了个全局口子
别指望工具自动修复命名混乱
PostCSS插件（如 postcss-bem）能帮你把 &__input 编译成 search-form__input，但它不会判断你该不该把一个 .header-nav 改成 main-header__nav。真正关键的决策点在于：
- Block 名是否对应真实可复用的 UI 单元（
user-card✅，section❌） - Element 是否真的依附于该 Block（
form-item__label✅，form-item__header如果 header 实际来自 layout 组件，就该拆出去） - Modifier 是否描述视觉/行为变体，而非 JS 状态（
button--loading容易和异步逻辑耦合过紧，button--busy更中性）
这些判断没法自动化，得靠人盯着 HTML 结构和组件边界做取舍。名字写错可以改，归属搞混了，后期重构成本会指数级上升。
