BEM通过block__element--modifier三段式命名将作用域编码进类名，使search-form__submit与modal__submit天然隔离，避免跨文件引入时的样式冲突。
直接在全局 CSS 中引入第三方样式或多个业务模块的 CSS 文件，.button、.header 这类泛化类名必然冲突；BEM 不靠“大家自觉”，而是用 block__element--modifier 的硬约定，在类名里自带作用域上下文，让冲突从“概率问题”变成“结构错误”——一旦写错，立刻可查、不可混用。
为什么 BEM 能隔离引入的 CSS，而不是靠加载顺序或 !important
浏览器按 <link> 顺序解析 CSS，但最终生效靠 specificity 和 !important。你改了 Button.css，发现按钮没变色，大概率是 LegacyTheme.css 里一条 .button { color: red !important; } 挡住了——这不是加载顺序能解决的，是作用域失控。
BEM 把作用域“编码进类名”：search-form__submit 和 modal__submit 天然不重叠，哪怕它们都引入了同一份 CSS 文件，也不会互相覆盖。
- 禁止写
.button:hover这类无上下文的通用规则；必须绑定 block，如search-form__submit:hover - 第三方库（如 Ant Design）的
.ant-btn不受你控制，但你可以用 wrapper block 隔离：.myapp-form-field--date .ant-date-picker -
!important是反模式：它会破坏 BEM 的 modifier 覆盖链，比如button--primary本该覆盖button的颜色，却被外部!important截断
引入多个 CSS 文件时，BEM 类名怎么避免跨文件污染
常见错误是把所有样式塞进一个 common.css，结果 .card 在 A 模块定义宽高，B 模块又重定义 margin，谁后加载谁赢——BEM 要求每个 block 独立成文件，且只管自己。
立即学习“前端免费学习笔记（深入）”；
- 每个 block 对应一个 CSS 文件：
/components/card/Card.css只含.card、.card__title、.card--compact - 禁止跨 block 写组合选择器：
.card .button是反模式；应拆出新 block 或改用.card__action-button - 构建阶段用
postcss-prefix-selector统一加前缀（如myapp-），比手写myapp-card__title更可靠，且不破坏第三方选择器链 - 老项目已有
.user-info类？别全量替换。先并存，用[class^="user"]日志监控使用点，再逐步收敛到user-info__avatar
如何让 BEM 在引入第三方样式时真正起效，而不是白忙活
BEM 不是魔法，它不改变第三方类名，也不阻止别人写 div.header img。它只保证：你写的部分，边界清晰、可定位、不越界。
- 第三方组件（如
react-datepicker）输出的类名不可控，必须包一层 wrapper block：<div class="form-field--date"><DatePicker /></div> - CSS Modules 下仍要守 BEM：不要因为类名被哈希成
Button_button__abc123就放弃语义，原始名仍应是button和button__text - 禁用全局重置影响第三方：
* { box-sizing: border-box; }会污染所有组件；改为.myapp-root *或仅限 wrapper 内部 - Vue/React 中用
:deep()或:global()局部覆盖时，目标必须限定在 wrapper 内：.form-field--date:deep(.el-input__inner)，而非全局:deep(.el-input__inner)
最常被忽略的一点：BEM 的有效性不取决于你写了多长的类名，而取决于你是否守住 “block 必须语义唯一” 和 “element 不得脱离 block” 这两条线。一旦允许 .card__title 被 header 直接复用，或者把 button--loading 当状态开关塞进 JS 逻辑，BEM 就退化回普通命名约定，冲突风险照旧。
