bem类名不能替代bootstrap语义类，必须共存于class属性中；否则bootstrap样式因选择器不匹配而失效。
为什么直接在Bootstrap HTML里加BEM类名会失效
因为Bootstrap的组件样式依赖特定类名（如 .btn、.card）触发，你写 user-card__header 但没写 .card，那 card 的 padding、border-radius 等默认样式就根本不会生效。BEM不是覆盖层，它不自动继承框架逻辑。
常见错误现象：dashboard__sidebar 在页面上没边框、没阴影，检查发现它没被任何 Bootstrap CSS 规则匹配到——因为 .dashboard__sidebar 不等于 .sidebar，也不在 .col 或 .offcanvas 的选择器范围内。
- 必须保留 Bootstrap 所需的语义类（
.btn、.container、.row等），BEM类名作为额外补充，不能替代 - HTML 中应同时存在两类 class：
<div class="card user-card">，而不是二选一 <li>避免用 BEM 类去“模拟”Bootstrap 行为（比如写 <code>form__group期望它自动有.mb-3效果），那得自己重写所有间距逻辑 - 在自定义 SCSS 中，用
!important只针对基础设施级契约（如box-sizing: border-box !important），其他场景优先提升选择器特异性：.user-btn.user-btn--disabled比.user-btn--disabled更稳 - 利用 Sass 的
@extend复用 Bootstrap 的占位符（如果项目用的是源码编译）：@extend .btn, .btn-primary;再叠加.user-btn--large调整 padding - 禁用 Bootstrap 中你不用的模块（如
$enable-button-variants: false），减少干扰规则数量，降低覆盖难度 - 所有自定义变量必须加命名空间前缀：
$user-card-border-radius、$user-card-spacing-sm，绝不要复用 Bootstrap 原始变量名 - 在入口 SCSS 文件中，确保
@import "variables"（Bootstrap 原生）在最前，@import "custom-variables"（你自己的）紧随其后，再导入 Bootstrap 其他模块 - BEM 组件的 SCSS 文件里禁止
@import "bootstrap/scss/variables"—— 变量已在顶层导入，重复引入会导致 Sass 报Undefined variable - 浏览器 DevTools 里仍能看到原始 BEM 类名（只要构建配置了
localsConvention: 'camelCaseOnly'），搜索user-card__title就能定位到对应文件 - HTML 中 class 必须通过 JS 注入：
<h2 classname="{styles['user-card__title']}"></h2>，不能手写class="user-card__title"，否则运行时不存在 - 禁止在 CSS Modules 文件里写
.btn {}这类通用类——Modules 会把它当成局部作用域，结果按钮失去所有 Bootstrap 样式
如何让BEM样式不被Bootstrap的高特异性规则覆盖
Bootstrap 很多组件用了复合选择器（如 button.btn.btn-primary），权重远高于单个 .user-btn--disabled。光靠顺序加载 CSS 文件解决不了问题。
怎样组织BEM文件结构才不和Bootstrap的SCSS变量冲突
Bootstrap 的 _variables.scss 定义了大量全局变量（$primary、$spacers），而你的 BEM 组件若也定义同名变量（比如 $primary 在 user-card/_variables.scss 里），Sass 编译时会报错或静默覆盖。
使用CSS Modules时BEM还能起作用吗
能，但方式变了。CSS Modules 会把 .user-card__title 编译成类似 user-card__title_1a2b3c 的哈希名，原始类名只存在于开发时 source map 和 JS 对象中。
user-form__submit 替代 .btn.btn-primary，后续维护就会卡在“到底是改 Bootstrap 配置，还是重写整个表单样式”的死循环里。
