BEM通过显式命名解耦样式与DOM结构，避免嵌套选择器导致的强绑定问题；其block__element--modifier规范明确语义，支持复用与隔离，但需团队共识以避免过度嵌套或逻辑耦合。
为什么直接写 .header .nav li a 会拖慢重构节奏
因为这种嵌套选择器把样式和 DOM 结构强绑定了。一旦改个组件层级，比如把 nav 提到 header 外面，或者加个 div 包裹，样式就断了——你还得全局搜、挨个试、手动修。
更麻烦的是，它让「改一个地方」变成「可能影响十个页面」：别人不敢动 .nav，怕牵连 .header .nav；你也不敢抽离复用，因为不确定哪层父级还在依赖这个路径。
- 所有依赖父子关系的选择器，本质都是隐式接口，没人文档、没人校验、改了就崩
- BEM 的
.header__nav-item是显式命名，删掉父容器也不影响子元素渲染 - Vue/React 里用 scoped style 或 CSS Modules 能缓解，但 BEM 在全局 CSS、SSR、微前端里仍是兜底方案
怎么给一个按钮写符合 BEM 的类名
不是简单加双下划线。BEM 要求每个类名表达「它是什么」，而不是「它在哪」或「它长啥样」。
比如一个登录页的主按钮：
立即学习“前端免费学习笔记（深入）”；
<button class="btn btn--primary btn--large login-form__submit">登录</button>
-
btn是 Block（独立可复用的模块），定义基础尺寸、边框、光标等共性 -
btn--primary是 Modifier（状态/变体），只覆盖颜色、背景等差异属性，不重置其他 -
login-form__submit是 Element（块内子节点），表明它是login-form这个块的一部分，但不依赖其位置 - 避免
btn--login-submit这种耦合业务语义的 Modifier，它会让按钮无法在注册页复用
遇到第三方组件库样式冲突怎么办
比如 Ant Design 的 .ant-btn 和你自己的 .btn 碰上了，优先别用 !important 或深度选择器硬盖。
更可持续的做法是用 BEM 命名空间隔离：
- 给整个项目加前缀，如
myapp-btn、myapp-card，配合 PostCSS 插件自动注入 - 对第三方组件做轻量封装：
<MyButton>内部用className="myapp-btn myapp-btn--secondary"，把原始类名用style={{ all: 'unset' }}或 wrapper 元素隔开 - 警惕 CSS-in-JS 库（如 styled-components）的动态生成类名，在 SSR 或微前端中可能丢失哈希一致性，BEM 字符串类名反而更稳定
哪些情况 BEM 反而增加维护成本
BEM 不是银弹。当出现这些信号，说明你在用错地方：
- 类名长得像
product-list__item__title__link--hovered--disabled：Element 不该嵌套 Element，应该拆成product-list__item+product-list__item-title+product-list__item-title-link - 同一组件在多个页面反复写
block__element--modifier，却没抽成可配置的 React/Vue 组件：BEM 解决样式耦合，不解决逻辑耦合 - 用
js-前缀绑定行为（如js-toggle-menu）却没配套 JS 模块管理：类名成了隐式 API，别人删了它 JS 就挂，又回到「不敢动」的老路
真正难的不是写对类名，而是团队对「什么算一个 Block」「Modifier 覆盖到哪一层」有共识。没约定的 BEM，比不用还容易出坑。
