bem通过块名+元素名+修饰符的三段式命名和对应文件结构强制约束类名，避免全局样式冲突；它不自动隔离但可读可控，需配合代码审查落地。
为什么直接用 .button 会冲突
多人协作时，.button 这种泛化类名大概率被不同模块重复定义——A组写了 .button { color: red; }，B组后来加了个 .button { padding: 8px; }，结果样式互相覆盖，谁的 CSS 后加载谁赢。这不是浏览器 bug，是 CSS 全局作用域的天然特性。
关键不是“能不能避免”，而是“不加约束就必然发生”。哪怕团队约定命名前缀，时间一长也会有人漏写、缩写不一致（btn / ui-btn / commonButton），最终退化成拼运气。
BEM 的三段式命名怎么落地到文件结构
BEM 要求类名形如 block__element--modifier，但光改名字没用，得让文件组织方式强制对齐。比如一个搜索框组件：
-
search-form/目录下放所有相关文件 - CSS 文件里只出现
.search-form、.search-form__input、.search-form--compact - JS 中操作 DOM 也只认这些类名：
document.querySelector('.search-form__submit')
重点：目录名 = Block 名，所有子元素和修饰符都从这个根出发。一旦发现某处用了 .input 或 .btn，就是违反约定，立刻能定位到是谁绕过了规范。
遇到嵌套组件时 BEM 容易崩在哪
常见错误是把嵌套关系硬塞进类名，比如 .header__nav__item 或 .card__content__title。BEM 明确反对这种“路径式”写法——__ 只表示直属子元素，不表示 DOM 深度。
正确做法是让每个 Block 自洽：
-
.card内部如果有个标题，就叫.card__title，不管它实际在<div> <h2> 还是 <code><header><h1></h1></header>里 - 如果标题本身是个独立组件（比如带图标+文字的复合标题），那就抽成新 Block：
.title-block，在.card里用<div class="card__header"><div class="title-block">...</div></div>
否则，一旦 DOM 结构微调（比如加一层 wrapper），类名就得全改，维护成本飙升。
要不要用 CSS Modules 或 scoped CSS 替代 BEM
可以，但代价是割裂。CSS Modules 生成哈希类名（SearchForm_input__aBc12）确实杜绝冲突，但它让开发者失去对类名的控制权——调试时看到的类名和源码对不上；第三方库或 SSR 渲染可能无法注入对应类名；想用 JS 动态切换状态（el.classList.add('is-loading')）还得靠 classNames 或额外映射。
BEM 是人可读、可预测、可调试的折中方案。它不解决“自动隔离”，而是用清晰规则把冲突风险压到最低。真要上 CSS-in-JS 或 scoped，建议只在新项目小范围试水，老项目改用 BEM 更平滑。
最常被忽略的一点：BEM 不是写完就算，得配合代码审查卡住 class="xxx" 里的非法字符串。没这道门禁，再好的规范三个月就形同虚设。
