因为Bootstrap样式依赖特定语义类（如.card、.btn）触发，只加BEM类名（如user-card__header）而缺失.card等基础类，会导致padding、border-radius等样式完全不匹配；必须共存两类class，如<div class="card user-card">，且BEM不可模拟Bootstrap行为或侵入其内部结构。
为什么直接加BEM类名会导致Bootstrap样式失效
因为Bootstrap的样式规则依赖特定语义类名（如.card、.btn）触发，你只写user-card__header却不带.card，它的padding、border-radius、box-shadow等基础样式根本不会被匹配到。BEM类名不是“增强层”，它不自动继承或代理Bootstrap的样式逻辑。
常见错误现象：dashboard__sidebar在页面上没边框、没阴影，DevTools里查不到任何生效的CSS规则——因为它不在.sidebar、.offcanvas或.col的选择器范围内。
- 必须同时保留Bootstrap所需语义类：
<div class="card user-card">，而不是二选一 - 禁止用BEM类模拟Bootstrap行为，比如指望
form__group自动获得.mb-3效果——那得自己重写所有间距逻辑 - 第三方组件（如
<b-button>或<el-input>）内部class不能被BEM直接覆盖，需封装容器
如何避免BEM样式被Bootstrap高特异性规则覆盖
Bootstrap大量使用复合选择器（如button.btn.btn-primary），权重远高于单个.user-btn--disabled。仅靠CSS加载顺序无法可靠解决。
- 提升选择器特异性：用
.user-btn.user-btn--disabled代替.user-btn--disabled - 在SCSS中用
@extend复用Bootstrap占位符（前提是项目编译源码）：@extend .btn, .btn-primary;再叠加修饰 - 禁用不用的Bootstrap模块（如
$enable-button-variants: false），减少干扰规则数量 -
!important只用于基础设施级契约（如box-sizing: border-box !important），其他场景慎用
BEM与Bootstrap变量/SCSS文件如何共存不冲突
Bootstrap的_variables.scss定义了全局变量（$primary、$spacers），你的BEM组件若也定义同名变量（如$primary在user-card/_variables.scss里），Sass编译会报错或静默覆盖。
立即学习“前端免费学习笔记（深入）”；
- 所有自定义变量必须加命名空间前缀：
$user-card-border-radius、$user-card-spacing-sm - 入口SCSS中，确保
@import "variables"（Bootstrap原生）在最前，@import "custom-variables"紧随其后 - BEM组件SCSS文件里禁止
@import "bootstrap/scss/variables"——变量已在顶层导入，重复引入会报Undefined variable - 组织结构建议：
src/scss/bootstrap/放框架源码，src/scss/bem/放业务块，按block/__element.scss分文件
怎样封装Bootstrap组件为真正可维护的BEM块
把Bootstrap组件当“黑盒”，只控制容器和输入输出，不侵入其内部class。否则.btn > i的样式权重会压垮button__icon，且状态联动（如:disabled）完全失效。
- 正确HTML结构：
<div class="form-actions"><button class="form-actions__submit">提交</button></div> - SCSS中用
& .btn提权并透传状态：.form-actions__submit { & .btn { /* 样式 */ } } - 动态class拼接时注意空格：
class="btn "要改为class="btn"，否则.btn不匹配 - 第三方容器（如
<swiper>）必须外层包一层BEM块：<div class="carousel"><swiper></swiper></div>
真正难的不是写对BEM命名，而是判断哪些地方该让Bootstrap接管、哪些地方必须由BEM兜底——边界模糊时，优先保Bootstrap的状态逻辑，再用BEM包裹和扩展。
