正确做法是将Bootstrap作为“原子样式层”，BEM作为“业务语义层”分层协作；不可硬套BEM类名到Bootstrap组件上，否则会破坏其权重、状态联动与维护性。
直接在 Bootstrap 组件上硬套 BEM 类名，基本等于放弃 Bootstrap 的 class 体系——它不会生效，还会引发权重冲突和维护混乱。正确做法是把 Bootstrap 当作“原子样式层”，BEM 作为“业务语义层”，两者分层协作。
为什么不能给 .btn 加 button__icon 这类类名
Bootstrap 的 .btn 样式依赖自身选择器权重（比如 .btn.btn-primary）和内部结构（如 .btn > i）。你加一个孤立的 button__icon 类，既没继承 .btn 的基础样式，又没参与它的状态组合逻辑（.btn:disabled 不会自动影响 button__icon）。更麻烦的是，CSS 特异性可能被破坏：一个 .button__icon 规则，权重远低于 .btn > i，结果图标样式完全不生效。
- 不要写：
<button class="btn btn-primary button__icon"> - 也不要写：
<button class="btn btn-primary"><i class="button__icon"></i></button>—— 这会让button__icon失去与按钮状态的联动 - 真正该做的是：用 BEM 封装整个按钮容器，把
.btn当作内部实现细节
如何封装第三方组件为 BEM 块（以 el-button 或 bootstrap-button 为例）
把第三方组件当“黑盒”，只控制它的容器和输入输出，不侵入其内部 class。这样既能复用框架能力，又能保持业务层语义清晰。
- HTML 结构示例：
<div class="form-actions"><button class="form-actions__submit">提交</button></div> - 在 CSS 中，
.form-actions__submit不写具体样式，而是通过& .btn提权并透传状态：.form-actions__submit { & .btn { padding: var(--spacing-sm) var(--spacing-lg); } & .btn:disabled { opacity: 0.5; cursor: not-allowed; } } - 如果用的是 Bootstrap 的 data-api 初始化 tooltip，浮层 class 是动态生成的（如
.bs-tooltip-top），此时 BEM 只能管到触发元素（form-actions__help），浮层样式需单独用.tooltip .tooltip-inner覆盖，不能指望form-actions__help--tooltip
修饰符怎么和 Bootstrap 的状态类共存
Bootstrap 自带 .is-invalid、.disabled、.active 等状态类，它们和 BEM 修饰符不是互斥关系，而是分工不同：Bootstrap 类负责“框架级状态渲染”，BEM 修饰符负责“业务级语义表达”。关键在于谁来触发、谁来响应。
立即学习“前端免费学习笔记（深入）”；
- 让 BEM 修饰符控制是否启用某组 Bootstrap 类：
.form-field--required .form-field__input { &:not(.is-invalid) { border-left: 2px solid var(--color-required); } } - 避免重复定义同一行为：不要同时写
.button--disabled和.btn:disabled去设 opacity —— 选一个源头统一控制（推荐由 JS 控制.btn.disabled，BEM 修饰符只用于布局或主题切换） - 主题类（如
.theme--dark）应作用于根容器，再通过 CSS 自定义属性影响内部所有子元素，包括 Bootstrap 组件：.theme--dark .btn { --bs-btn-bg: #333; }
BEM + Bootstrap 的打包体积与可维护性陷阱
很多人以为加了 BEM 就一定更重，其实恰恰相反——但前提是别把 Bootstrap 的 class 当作 BEM 元素来用。真正的体积节省来自解耦：BEM 块之间不再靠 DOM 层级嵌套传递样式，PurgeCSS 才能准确识别哪些 .btn 真的被用了，哪些是死代码。
- 错误示范：Sass 中写
.card { .btn { ... } }—— 这生成的选择器是.card .btn，PurgeCSS 无法判断.btn是否独立使用，不敢删 - 正确做法：每个 BEM 块的样式文件只 import 它真正需要的 Bootstrap mixins/variables，不 import 整个
bootstrap.scss - 最易被忽略的一点：BEM 块的命名必须和 React/Vue 组件名对齐（如
ProductCard→product-card），否则团队查 bug 时会在 JSX 和 CSS 之间反复横跳，效率归零
