BEM失效的根本原因是忽视其对组件边界和DOM职责的约束。每个块必须是独立UI单元，元素不得嵌套，修饰符仅表状态，样式须锚定块名，禁用类型选择器，同名块应拆分为独立块，框架中需适配动态DOM结构。
为什么BEM命名写出来还是像一锅粥
根本原因不是没用BEM，而是把 BEM 当成“加个下划线”的格式规范，忽略了它对组件边界和DOM职责的硬性约束。一个 .header__logo--dark 看似合规，但如果这个 class 同时出现在页头、弹窗头、邮件模板里，且样式逻辑互相污染，那 BEM 就已经失效了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个
BEM块（B）必须对应一个独立可复用的 UI 单元，比如card、search-input，不能是语义模糊的section或wrap - 元素（
E）只能直接属于块，不能嵌套在另一个元素里——.card__content__title是错的，应为.card__title - 修饰符（
M）只表达状态或变体，不承担布局或定位职责；避免写.button--full-width，宽度应由父容器或工具类控制
怎么让CSS文件真正按组件拆分而不乱套
组件化不是靠目录结构“假装”分离，而是确保每个组件的样式作用域不逃逸。很多人建了 components/card/ 目录，但 card.css 里仍写 h3 { color: #333 }，结果所有卡片里的 h3 全被改了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁止在组件 CSS 中使用类型选择器（
h3、div）、ID 选择器（#main）或未限定范围的属性选择器（[href]） - 所有样式必须锚定在块名上：只写
.card {}、.card__title {}，连.card h3都算越界 - 用构建工具（如 PostCSS +
postcss-bem）做语法检查，自动报出.card div这类非法组合
遇到“同名Block在不同页面表现不一致”怎么办
典型现象：全局定义了 .modal，但营销页的弹窗要圆角+阴影，后台页的弹窗要极简无边框——强行用 .modal--marketing 和 .modal--admin 会让修饰符爆炸，维护成本飙升。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃“全局唯一 Block 名”，接受
marketing-modal和admin-modal是两个独立 Block；BEM 不要求语义统一，只要求内部结构自洽 - 共用逻辑抽成工具类（如
u-flex-center）或 CSS 自定义属性（--modal-padding），而不是靠修饰符硬塞 - 如果真要复用样式，用
@import或 CSS 模块的:export导出变量，而非靠 class 名继承
为什么用上了BEM，React/Vue组件里还是样式打架
框架组件的 DOM 渲染不可控，比如 <select></select> 内部可能动态插入 div、ul、portal 节点，而你的 .select__list 样式只写了静态结构，一挂载就失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用框架提供的样式穿透机制（Vue 的
:deep(.select__list)，React 的className透传 props）补全真实 DOM 路径 - 对第三方组件，优先用其暴露的
classNamePrefix或classNamesprop，而不是自己重写.rc-select-dropdown - 避免用
!important强行覆盖，它会破坏 BEM 的层级可信度；真需要强干预时，用更具体的 Block 名（如form-select）替代
BEM 的复杂点不在命名规则本身，而在于你得时刻判断：这个 class 究竟是属于组件内部的封装细节，还是对外暴露的契约接口。一旦混淆，后面所有样式隔离、复用、测试都会变成体力活。
