Bootstrap 5 的 CSS 架构本身并不符合 BEM 规范，其类名如 btn、card-title 是功能导向的原子类或语义化组件类，缺失 Block 上下文，例如 card-title 不体现所属业务块（如 product-card__title），且未采用 BEM 要求的 .block__element 或 .block--modifier 格式；虽 Sass 模块拆解便于 BEM 定制，但需手动重写选择器结构并隔离样式边界。
Bootstrap 5 的 CSS 架构本身**并不符合 BEM 规范**，它只是在模块拆分和依赖管理上为 BEM 实践提供了更干净的工程基础——但它的类名（如 btn、card-title）仍是功能导向的原子类，不是 BEM 式的块-元素-修饰符结构。
Bootstrap 5 的类名仍是 btn / card-title，不是 .btn__icon--loading
它没改命名逻辑：btn 是工具类，card-title 是语义化组件类，但两者都缺失 Block 上下文。比如 card-title 出现在 product-card 或 user-card 里，类名本身不体现归属；而 BEM 要求写成 product-card__title 或 user-card__title 才算合格。
常见错误现象：直接把 Bootstrap 的 card 当作 BEM 的 Block 用，结果在多个业务卡片中复用同一套样式，导致状态覆盖（如 card--featured 在不同卡片里含义冲突）。
- Bootstrap 的
card是通用容器，BEM 的product-card是业务实体 -
card-body不是card__body：双下划线缺失，且未绑定具体 Block - 即使你手写
product-card__body，Bootstrap 的 CSS 也不会响应这个类名——它只认自己的card-body
Sass 模块拆解让 BEM 定制更容易，但不等于自带 BEM
Bootstrap 5 把 _grid.scss、_buttons.scss、_utilities.scss 拆成独立文件，且明确要求前置导入 functions→variables→mixins，这确实方便你在自定义 SCSS 中按需引入并包裹进 BEM 结构。
立即学习“前端免费学习笔记（深入）”；
使用场景：你想给搜索框实现 BEM 风格，可以这样写：
.search-form {
@import "bootstrap/scss/forms"; // 只导入表单基础变量和 mixin
&__input {
@extend .form-control; // 复用 Bootstrap 的输入样式逻辑
}
&__button {
@extend .btn, .btn-primary;
}
}
但注意：@extend 在 Bootstrap 5 中已被官方不推荐（易导致 CSS 输出顺序混乱），更稳妥的是用 @include 或直接复制关键声明。
- 必须手动重写选择器结构，Bootstrap 本身不提供
search-form__input这类类名 - 如果用了
@extend .btn，最终 CSS 里可能生成.search-form__button.btn，权重比纯 BEM 类高，反而破坏隔离 - Utility 类（如
mt-2）无法被 BEM 化——它们天生就是全局的、无上下文的
真正能落地 BEM 的地方：你自己的组件目录，不是 Bootstrap 的 CSS
BEM 的边界在你写的 _product-card.scss 里，不在 node_modules/bootstrap/scss/ 下。Bootstrap 5 的价值是：它不再强耦合布局与视觉（比如栅格系统只管 col，不强制 card 必须用 row 包裹），让你能自由定义 Block 并组合工具类。
容易踩的坑：
- 误以为启用 Bootstrap 5 就等于用了 BEM——实际只是“没拦着你用”
- 在 HTML 里混用：
<div class="product-card"> <h3 class="card-title"> —— <code>card-title和product-card语义断裂 - JS 动态加类时写
el.classList.add('product-card__title--loading')，但 CSS 文件里没定义该类，只靠 Bootstrap 的text-muted临时顶替
BEM 的约束力来自人写的类名和 SCSS 结构，不是框架自动赋予的。Bootstrap 5 做对的是松开手，让你能写 .order-summary__item--pending 而不被它的 list-group-item 拦住——但写不写、怎么写、是否漏掉双下划线，全在你自己那一行 class="" 里。
