不能直接改造bootstrap组件css为bem规范，因其类名是js行为、响应式、主题变量和ssr的基石；正确做法是隔离使用+bem封装+语义桥接，即用bem容器包裹原生bootstrap组件，交互与样式均落在容器层，内部保留原始类名以保障功能。
不能直接“改造”Bootstrap组件的CSS为BEM规范——因为Bootstrap的类名（如 .btn、.card-body）是其运行时行为、JS插件、工具类系统和文档约定的基石，硬改会立即导致JS失效、响应式断裂、主题变量不生效，甚至破坏SSR水合。真正可行的路径是：隔离使用 + BEM封装 + 语义桥接。
为什么直接重命名 Bootstrap 类名会崩掉 JS 行为
Bootstrap 的 JS 组件（如 Modal、Dropdown）内部大量依赖固定类名做 DOM 查询和状态切换：document.querySelector('.dropdown-toggle')、el.classList.contains('show')、data-bs-toggle="modal" 绑定也隐式依赖 .modal 结构。一旦你把 .btn-primary 改成 .button--primary，JS 就找不到目标元素，点击无反应、动画不触发、API 埋点全丢。
常见错误现象：
- 点击下拉按钮后菜单不展开，控制台报
Cannot read property 'classList' of null -
data-bs-dismiss="modal"失效，关闭按钮点了没反应 - 表单验证提示（
.invalid-feedback）样式还在，但 JS 不再自动显示/隐藏
正确做法：用 BEM 封装 Bootstrap 组件，而非改造它
把 Bootstrap 当作“不可变的底层渲染引擎”，你在它外面套一层 BEM 容器，所有交互钩子、样式扩展、状态管理都落在这个容器上，内部只保留原生 Bootstrap 类名用于功能保障。
实操建议：
- 宿主元素必须带 BEM 块名，例如：
<div class="myapp-search-form"> <li>内部 Bootstrap 组件保持原样：<code><input class="form-control" type="text">，不改类名 - 所有自定义样式通过块作用域限定：
.myapp-search-form .form-control或更安全的.myapp-search-form__input（需额外加 wrapper 或用<span class="myapp-search-form__input"><input class="form-control"></span>） - JS 交互逻辑全部绑定在 BEM 块上，例如监听
.myapp-search-form__submit而非.btn-primary - 若需透传状态（如 loading），用
data-属性或独立状态类：.myapp-search-form--loading，由 JS 控制，不依赖 Bootstrap 的.disabled或.show - 禁止在 BEM 元素上混用工具类做“样式覆盖”，例如：
<div class="card__title text-lg-start"> —— 这会让 <code>.card__title的语义被稀释，且未来调整标题对齐方式时需全局搜text-lg-start - 工具类应仅用于临时排版或响应式微调，且必须出现在 BEM 块内：
<div class="myapp-card"> <h2 class="myapp-card__title mt-2"> </h2> <li>若某工具类高频复用（如 <code>.d-flex在多个卡片中出现），应将其抽象为 BEM 修饰符：.myapp-card--flexible，并在 CSS 中用@include utilities("d-flex")或直接写display: flex - 务必确认构建流程中
purgecss或tree-shaking不会误删你实际用到的工具类 —— 因为它们不是 BEM 类，不会被组件文件显式引用 - 在
.myapp-button--brand中写：background-color: var(--bs-primary); border-color: var(--bs-primary);，而不是硬编码#0d6efd - 避免在 BEM CSS 中重复定义颜色映射表；让
:root或 Bootstrap 的_variables.scss成为唯一真相源 - 如果项目需要多主题（如 light/dark），优先用
data-bs-theme="dark"触发 Bootstrap 内置机制，BEM 类只需声明.myapp-header--inverted这类视觉变体，不接管颜色逻辑 - 注意：BEM 类名无法被 Bootstrap 的 Sass 函数（如
color-contrast()）识别 —— 所以不要试图在.myapp-card__title里调用color-contrast($card-bg)，应在顶层变量中预计算好对比色并导出为 CSS 变量
如何让 BEM 类名与 Bootstrap 工具类共存不冲突
Bootstrap 工具类（.mt-3、.d-none、.text-center）本质是原子化 CSS 规则，它们和 BEM 并不互斥，但必须明确职责边界：工具类只管布局与基础表现，BEM 只管语义与模块归属。
关键约束：
BEM 与 Bootstrap 主题变量如何联动
Bootstrap 的主题变量（$primary、--bs-primary）本身是中立的，BEM 类名可以安全地复用这些变量，但不能反向覆盖或替代它们。
实操建议：
最易被忽略的一点：BEM 封装层一旦建立，就必须承担起“边界守门人”的责任——所有进入该块的 HTML、JS、CSS 都要经过它过滤和转译。比如第三方图标库的 <i class="bi bi-search"></i>，不能直接塞进 .myapp-search-form__icon，而应包裹一层 <span class="myapp-search-form__icon"><i class="bi bi-search"></i></span>，否则 BEM 的语义链就断了。这不是多此一举，而是让“谁在用什么”始终可追溯。
