BEM通过block__element--modifier将归属、层级、状态硬编码进类名，确保组件自带上下文、不依赖DOM结构、避免样式冲突；.card .title因隐式绑定层级而一复制即失效，button__icon--large违反modifier只作用于block的原则。
因为BEM把“这个样式属于谁、是什么、当前什么状态”三个问题直接塞进类名里，组件挪到哪都自带上下文，不用猜、不依赖父级结构、不怕被覆盖。
为什么 .card .title 一复制就失效
这类后代选择器把样式作用域隐式绑在 DOM 层级上。一旦目标组件被嵌入另一个已有 .card 的页面，或父容器 class 名从 .section-card 改成 .feature-card，.card .title 就匹配失败或误命中。
- 更常见的是：两个团队写的
.button同时加载，后引入的 CSS 覆盖前者的:hover，但没人意识到——因为没显式声明“这个 button 样式只属于我这个模块” - BEM 强制用单类名：
.card__title、.button--primary，浏览器一次哈希查找命中，人眼一眼看出归属 - DevTools → Computed → Styles 面板里搜空格就能揪出残留的
.card .title类选择器
button__icon--large 这种写法为什么错
BEM 不允许修饰符直接挂在元素上，button__icon--large 违反了 “Modifier 只能作用于 Block 根” 的原则。它会导致样式逻辑断裂、tree-shaking 失效、PurgeCSS 无法识别使用场景。
- 正确做法是：
button--large控制整体缩放，内部button__icon自动继承布局变化 - 禁止
button--width-200px或button--bg-blue-500这类“样式细节类名”，应改用 CSS 自定义属性或有限语义修饰符（如button--primary、button--disabled） - 一个 Block 的 Modifier 总数建议 ≤5 个，否则规则爆炸，构建后体积反而上涨
现有项目补 BEM 容易翻车的三个点
不是名字带双下划线就是 BEM，真正落地时最常破功的是这三处：
立即学习“前端免费学习笔记（深入）”；
- 只改子元素 class，漏掉块根：写了
.card__title却保留旧的.title，导致样式残留或冲突 - 跨块通信：
.card__content .button是错的，必须写成.card__action-button；否则按钮样式一变，所有卡片都中招 - 和第三方组件库硬刚：直接覆盖
.el-button类名。升级 Ant Design 后样式崩，还污染全局。稳妥做法是封装 wrapper：<div class="my-button"><el-button class="my-button__inner">提交</el-button></div>
BEM 不解决加载顺序、优先级、伪类遗漏这些底层问题。命名再规范，如果 .button--disabled 和 .button__text 的层叠权重没管住，照样出 bug。
