bootstrap类名（如.btn）与bem类名（如.search-form__submit）本身不冲突，真正导致覆盖的是两者同处全局作用域且css规则加载顺序不当——权重相同（0,1,0）时，后定义者生效；若bootstrap css先加载，其.btn规则可能覆盖后引入的bem样式。
Bootstrap 类名（如 .btn、.card）和 BEM 类名（如 .search-form__submit）本质不冲突——真正炸锅的是你把两者混在同一作用域里硬拼权重，或误以为加个双下划线就能自动隔离。
为什么 .btn 会覆盖 .search-form__submit
这不是 BEM 写错了，是 CSS 层叠规则在起作用：两个类选择器权重相同（都是 0,1,0），谁的 CSS 规则在最终文件里位置靠后，谁就生效。而 Bootstrap 的 CSS 文件通常被放在 main.css 开头或通过 <link> 早加载，你的 BEM 文件如果后引入，它的 .search-form__submit 就可能被 Bootstrap 的 .btn 覆盖——尤其当两者都设了 background-color 这种同名属性时。
常见现象：
- DevTools 中目标样式被划掉，来源显示为
bootstrap.min.css - 你写了
.search-form__submit { background: blue; }，但按钮仍是 Bootstrap 的默认灰底 - 没用
!important，也没嵌套，就是“看不见生效”
用外层命名空间包裹 Bootstrap 样式
这是纯 HTML 或无法改构建流程时最稳的兜底方案：不让 Bootstrap 的规则直接进全局作用域。
操作步骤：
- 给业务容器加唯一属性，比如
<div data-scope="search-page">...</div> - 所有 Bootstrap 相关 CSS 规则前置该属性：
[data-scope="search-page"] .btn、[data-scope="search-page"] .form-control - 用 PostCSS 插件（如
postcss-prefix-selector）自动加前缀，避免手写漏项 - 确保第三方 JS 组件（如
bootstrap-datepicker）挂载的 DOM 也被这个data-scope包住，否则弹窗样式仍会泄露
注意：button 标签本身不带 class，但 Bootstrap 很多逻辑依赖 [class*="btn"] 这类属性选择器，加前缀后需同步调整 JS 钩子，否则功能异常。
用 CSS Modules 隔离 BEM 组件，绕开 Bootstrap 全局污染
Webpack/Vite 默认支持 .module.css，它不改变 BEM 的语义，只给类名加哈希后缀，天然避开 .btn 冲突。
关键约束：
- 只对
import './SearchForm.module.css'这种显式导入生效；<link rel="stylesheet">引入的 Bootstrap 不受保护 - BEM 块名仍保持可读：
search-form__submit编译后变成search-form__submit_jk3f9，调试时能反推来源 - 第三方组件需用
:global(.btn)显式透出，否则其样式会被模块化截断 - Vue 单文件组件中
<style scoped></style>对el-date-picker这类挂到body下的弹窗无效，必须配合外层命名空间
别在 BEM 类里复用 Bootstrap 的语义词
这是最容易被忽略的结构性翻车点：BEM 的 block 名必须是真实功能单元，不是视觉词或框架词。
危险写法：
-
.btn__icon——btn是 Bootstrap 的抽象概念，不是你项目的 block -
.card__header—— 如果页面里同时有 Bootstrap.card和你写的.user-card，DOM 结构一乱就全失效 -
.form-group__input——form-group是 Bootstrap 的布局类，不是你业务模块的闭环单元
正确做法：block 名带业务上下文，且必须对应真实 DOM 容器节点。.search-form ✅（含搜索框+提交+清空逻辑），.legacy-modal ✅（明确标识技术债边界）。
真正难的不是写对 __ 和 --，而是每次敲下 class=" 前，得确认这个样式是否真的属于当前 block，以及它有没有可能在另一个页面、另一个团队、另一份打包产物里被悄悄重定义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
