Bootstrap虽不采用BEM规范，但用BEM编写自定义辅助CSS可有效隔离业务逻辑、避免样式污染、提升维护性。BEM类名需绑定块、校验修饰符，并避免与Bootstrap工具类混用，以确保样式可控、重构安全，同时提高代码可读性与团队协作效率。
Bootstrap 本身不采用 BEM 命名规范，这是一个既定事实。若在项目中直接使用 .user-card__button--primary 这类 BEM 类名，并不会自动获得 Bootstrap 的样式支持。然而，在 Bootstrap 基础上使用 BEM 规范编写自定义辅助 CSS，能够有效隔离业务逻辑、避免样式污染，并提升项目的长期可维护性。这正是许多开发者选择将两者结合使用的核心原因。
BEM 规范的核心价值在于通过严格的命名约定，将样式与组件结构绑定，从而降低样式覆盖风险，提高代码的可检索性和可维护性。在 Bootstrap 项目中引入 BEM 辅助 CSS，并非要替代 Bootstrap，而是在其基础上构建一套更清晰、更可控的业务样式层。
为什么不能直接把 Bootstrap 类当作 BEM 块使用
Bootstrap 的 card、btn 等类属于通用原子类或语义化组件类，缺少 Block 上下文。它们只表达“这是一个带样式的按钮”，而不表达“这是用户卡片里的按钮”。例如， 与 在语义、复用性和搜索定位上存在本质差异。
card-title 不等于 product-card__title：前者可能被其他页面的 .sidebar .card-title 意外覆盖；后者全局搜索 product-card__title 即可准确定位所有相关样式。一旦父容器结构发生变化，例如将 .card 替换为 .card > .card-title 的父子选择器将立即失效；而 .product-summary__title 只要类名存在，样式就依然生效。
Bootstrap 中不存在 btn--loading 这种双中划线修饰符写法，其状态通过叠加类（如 btn btn-primary disabled）实现，这种做法容易导致样式优先级不可控，增加样式重排风险。
如何在 Bootstrap 项目中安全引入 BEM 辅助类
关键不在于替换 Bootstrap，而在于用 BEM 封装业务层，让 Bootstrap 负责视觉基础能力。具体实施时，可参考以下组织方式：
新建独立的 SCSS 文件（如 _user-card.scss），不引入整个 Bootstrap，只按需导入变量和 mixin：@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables";
块名应抽象并带有业务前缀：.user-card 符合规范，.homepage-user-card 则过于具体，不利于复用。
元素必须绑定到块：.user-card__avatar 符合规范，.user-card .avatar 则容易因结构变动而失效，且可能导致样式污染。
修饰符必须校验值有效性：JS 动态拼接时需确保 status 不为空，否则会生成 .user-card__button-- 这类无效类名，导致样式静默失效。
BEM 辅助类与 Bootstrap 工具类共存时的注意事项
Bootstrap 的 mt-2、p-3 等工具类属于全局无上下文样式，与 BEM 类名存在天然冲突。不应将 mt-2 改为 user-card__content-mt-2 这样的写法。
正确做法：工具类仅用于原型或临时调试，上线前应转换为 BEM 元素内联声明，例如 .user-card__content { margin-top: 0.5rem; }。
避免在 BEM 元素上叠加过多工具类：
