应为BEM块定制专属工具类前缀而非覆盖Bootstrap默认类，通过重定义Sass变量$utilities生成解耦的color-brand等类名，并将Bootstrap组件封装进BEM块内、禁用其原生类，状态类须由BEM修饰符统一控制。
不能靠直接写 .btn--primary 覆盖 .btn-primary，因为 Bootstrap 的工具类是全局、高权重、无上下文的；BEM 要求样式归属明确，而 Bootstrap 默认不提供这种归属——你得主动切出隔离层，否则 BEM 块一加 btn 类，就等于把自己交给了全局样式池。
为什么 !important 或后代选择器会撕裂 BEM 语义
常见错误是写 .card__button .btn-primary { color: red !important; }。这看似“覆盖成功”，实则埋下三颗雷：
-
.card__button和.btn-primary属于不同命名体系：前者是 BEM 块内元素，后者是 Bootstrap 工具类，二者无语义隶属关系 -
!important会污染整个组件的样式优先级链，后续加.card__button--disabled时，CSS 权重博弈就失控了 - 后代选择器
.card__button .btn-primary依赖 DOM 结构，一旦按钮被抽成独立组件或换标签，样式立刻失效，且 DevTools 里根本看不出这个规则属于哪个 BEM 块
用 $utilities 重定义工具类前缀，而非覆盖
Bootstrap 5 的工具类不是静态字符串，而是由 Sass 变量 $utilities 编译生成的。想让 BEM 块安全用上工具能力，唯一正解是为它定制专属前缀，而不是在运行时硬覆盖。
- 在自定义 Sass 入口（如
custom-utilities.scss）中，先清空并重赋$utilities，只保留你需要的键值对，例如：$utilities: ( "color-brand": ( property: color, values: (brand: #2563eb), responsive: true, rules: "color !important" ) ); - 确保该文件在
@import "bootstrap/scss/utilities"之前加载，否则编译器读不到新配置 - 最终生成的类名是
color-brand而非text-brand，和你的 BEM 块名（如user-card）完全解耦，可放心用于<button class="user-card__action color-brand">
把 Bootstrap 组件封装进 BEM Block，禁用其原生类
遇到必须用 .navbar、.modal 这类复合组件时，别让它们裸奔进 HTML。BEM 要求块独立可复用，而 Bootstrap 组件自带全局样式和 JS 行为绑定，直接混用等于放弃作用域控制。
立即学习“前端免费学习笔记（深入）”；
- 新建一个 BEM 块（如
site-nav），HTML 中只写<nav class="site-nav">，不加任何 Bootstrap 类 - 在
site-nav.scss中，用@include navbar-expand-lg等 mixin 手动注入 Bootstrap 样式逻辑，但所有选择器都锚定在.site-nav下，例如：.site-nav { @include navbar-base(); &__toggler { @include navbar-toggler(); } } - JS 初始化也改走封装层：
new bootstrap.Navbar(document.querySelector('.site-nav'))，而非依赖.navbar类自动绑定
BEM 修饰符与 Bootstrap 状态类不能混用
别写 class="button button--primary btn btn-primary"。BEM 的 --primary 是语义开关，Bootstrap 的 btn-primary 是表现实现——两者目标一致，但层级错位。
- 状态类（如
is-active、is-loading）应由 JS 控制，专用于触发 BEM 修饰符，例如：el.classList.toggle('button--active') - Bootstrap 的
.disabled类本质是pointer-events: none+opacity，它不该成为 BEM 修饰符的一部分；正确做法是让.button--disabled内部复用 Bootstrap 的 disabled 规则，但通过变量注入：.button--disabled { @include button-disabled(); opacity: 0.6; } - 所有 Bootstrap 提供的视觉状态（hover/focus/active）必须收束到 BEM 块内部，禁止依赖外部伪类穿透，否则 SSR hydration 时容易出现样式闪动
真正难的不是写对 __ 和 --，而是判断哪些样式逻辑该交给 Bootstrap 处理、哪些必须收进 BEM 块边界里——工具类可以借，但控制权不能让。
