BEM通过block__element--modifier硬约定将作用域编码进类名，使.search-form__submit与.modal__submit天然不冲突；第三方组件需用wrapper block隔离，禁用全局覆盖，且禁止element嵌套element。
直接引入第三方 CSS 或多个业务模块的 CSS 文件时，.button、.header 这类泛化类名必然冲突；BEM 不靠“大家自觉”，而是用 block__element--modifier 的硬约定，在类名里自带作用域上下文，让冲突从“概率问题”变成“结构错误”——一旦写错，立刻可查、不可混用。
为什么 .search-form__submit 和 .modal__submit 天然不冲突
BEM 把作用域“编码进类名”。浏览器解析 CSS 时不看语义，只比 specificity 和 !important，但类名本身已携带上下文：search-form 是独立 block，modal 是另一个，二者无共享前缀，CSS 规则互不影响。
- 即使两个文件都定义了
submit相关样式，也不会互相覆盖 - 不用依赖
<link>加载顺序来“抢赢” - 也不用靠
!important强行压制——那是作用域失控的补救，不是设计
引入第三方组件（如 Ant Design）时怎么用 BEM 隔离
你无法改 .ant-btn 的类名，但可以控制它的使用边界。
- 必须包一层 wrapper block：
<div class="myapp-form-field--date"><DatePicker /></div> - 在 CSS 中用组合选择器限定作用范围：
.myapp-form-field--date .ant-date-picker - 禁止在全局 scope 写
.ant-btn { ... }，否则污染整个项目 - 如果需要定制主题，应通过官方提供的变量或 CSS-in-JS 方式注入，而非暴力覆盖
card__title--large 合法，但 card__title__icon 为什么不行
BEM 只承认一层嵌套：block → element，不支持 element → sub-element。强行多层会破坏隔离性和可维护性。
立即学习“前端免费学习笔记（深入）”；
-
card__title--with-icon是合法修饰符：它不新增 DOM 结构，只开关视觉状态 -
card__title__icon违反规则：它暗示icon是title的子元素，但实际可能复用在别处（比如user-card__avatar） - 真正该做的，是把图标升格为独立 block：
icon icon--status-online，再由父级组合使用 - 构建工具如
postcss-prefix-selector可统一加前缀，但不能替代语义建模
最常被忽略的一点：BEM 不是字符串格式规范，而是组件边界协议。写错类名，往往意味着 DOM 结构没想清、职责没划好——这时候修 CSS 不如先重画组件图。
