Bootstrap 不采用 BEM 规范，混用 BEM 类名无法获得其样式支持；但可在其基础上用 BEM 编写自定义辅助 CSS，以隔离业务逻辑、避免样式污染、提升可维护性。
Bootstrap 本身不采用 BEM 规范，直接在 Bootstrap 项目里混用 BEM 类名（如 .user-card__button--primary）不会自动获得 Bootstrap 样式支持；但**在 Bootstrap 基础上用 BEM 编写自定义辅助 CSS**，能显著隔离业务逻辑、避免样式污染、提升长期可维护性。
为什么不能直接把 Bootstrap 类当 BEM 块用
Bootstrap 的 card、btn 是通用原子类或语义化组件类，缺失 Block 上下文：它不表达“这是用户卡片里的按钮”，只表达“这是一个带样式的按钮”。你写 <div class="card"><button class="btn">，和 <div class="product-card"><button class="product-card__button"> 在语义、复用性、搜索定位上完全不同。
-
card-title不等于product-card__title：前者可能被其他页面的.sidebar .card-title意外覆盖；后者全局搜product-card__title就准确定位全部样式 - 一旦你改了父容器结构（比如把
.card换成<section class="product-summary">），所有依赖.card > .card-title的父子选择器立即失效；而.product-summary__title只要类名存在，样式就生效 - Bootstrap 的
btn--loading这种写法根本不存在——它没有双中划线修饰符机制，状态靠叠加类（btn btn-primary disabled）实现，导致 specificity 不可控、重排风险高
如何在 Bootstrap 项目中安全引入 BEM 辅助类
关键不是替换 Bootstrap，而是用 BEM 封装业务层，让 Bootstrap 只管视觉基础能力。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 新建 SCSS 文件（如
_user-card.scss），不 import 整个 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 等 utility 类是全局、无上下文的，它们和 BEM 类名天然冲突——你不能也不该把 mt-2 改成 user-card__content-mt-2。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：utility 类只用于原型或临时调试，上线前应转为 BEM 元素内联声明（如
.user-card__content { margin-top: 0.5rem; }） - 禁止在 BEM 元素上叠加过多 utility 类：
<div class="user-card__header p-3 bg-light rounded">—— 这类写法让p-3含义模糊（是 header 的内边距？还是整个卡片的？），后期统一调整内边距时无法精准搜索 - 如果真要保留 utility 类，务必用命名空间隔离，例如
u-mt-2（u-前缀显式标识为工具类），避免和业务 BEM 类名混淆
BEM 辅助 CSS 的真正价值不在“写得像不像”，而在“改起来敢不敢”：当你删掉一个组件文件，对应的所有样式都该彻底消失，而不是散落在几十个 .btn、.card-body 规则里等着某次重构时突然冒出来。这需要从第一个 __ 和第一个 -- 就建立约束，而不是等样式失控后再补救。
