BEM在内嵌H5中必须使用，因其通过block前缀天然规避宿主全局样式冲突，避免WebView版本差异、构建工具破坏、CSS覆盖等导致的样式失效。
在移动端 APP 内嵌 H5 场景下，BEM 不是“能用”，而是“必须用”——否则样式会因 WebView 版本差异、宿主 App 注入的全局 CSS、uni-app 或 React Native WebView 的 class 隔离缺失而频繁失效或污染。
为什么内嵌 H5 的 CSS 更容易冲突
APP 宿主（如微信、支付宝、自研壳）常注入全局样式（.btn、.text-center），甚至覆盖 body 默认 margin；uni-app 的 vue 编译后 class 不带哈希，React Native WebView 也不自动隔离；更关键的是，多个 H5 页面共用同一 WebView 实例时，CSS 文件顺序不可控，.header 可能被前一个页面的同名 class 覆盖。
- 现象：
user-card__title在 iOS WebView 正常，在 Android X5 内核下字体颜色被宿主.text类强制重置 - 原因：宿主 CSS 使用了高优先级选择器（
div.text { color: #666 !important; }），且未加命名空间 - 根本解法：不依赖优先级对抗，而用 BEM 的 block 前缀天然规避匹配 —— 宿主的
.text永远不会命中user-card__title
如何让 BEM 在 uni-app / Taro / React Native WebView 中真正生效
关键不是“写对类名”，而是“确保类名最终出现在 DOM 且不被构建工具破坏”。很多团队写了 card__content，但打包后变成 card__content_abc123 或被 PostCSS 自动删掉（因未在 JS 中引用）。
- uni-app 中禁用
styleScopes的scoped模式（它用属性选择器模拟作用域，但 BEM 本身已隔离，反而增加冗余和兼容风险） - Taro 项目若启用了
cssModules，必须关闭：BEM 类名需原样输出，不能被哈希化；否则styles['card__title']在运行时查不到 - React Native WebView 加载 H5 时，确保 HTML 中的
class属性未被第三方 SDK（如埋点脚本）清洗或重写 —— 检查控制台 Elements 面板，确认class="user-card user-card--active"真实存在 - 所有 BEM class 必须显式写在模板中，不要依赖 JS 动态拼接后塞进
innerHTML（易 XSS，且 WebView 下 innerHTML 插入的 class 不触发 CSSOM 更新）
与宿主 App 样式共存时的 BEM 边界处理
你无法改宿主代码，但可以划清边界。BEM 的 block 名不是装饰，是隔离墙。
立即学习“前端免费学习笔记（深入）”；
- 宿主提供了一个
.nav-bar，你不能直接复用它写.nav-bar__title—— 这属于跨 block 依附，违反 BEM 原则，且一旦宿主升级，你的样式立即崩 - 正确做法：用 wrapper 包一层，比如
<header class="myapp-header"><div class="nav-bar">…</div></header>，然后所有样式只写.myapp-header及其后代（.myapp-header__logo） - 第三方 UI 组件（如
van-button）输出的 class 不可控？不改它，但在外层加 block：<div class="form-submit-btn"><van-button></van-button></div>，再通过.form-submit-btn van-button局部覆盖（注意：仅限视觉微调，不改结构） - 禁止使用
!important对抗宿主样式 —— 它会让user-card--disabled失效，且无法被后续 modifier 覆盖
BEM 在内嵌 H5 中最容易被忽略的细节
不是命名规则记不住，而是执行链路上有断点：从开发 → 构建 → WebView 加载 → 宿主注入，任何一个环节漏掉 BEM 约束，就白写。
- Webpack/Vite 构建时，若启用 CSS Tree Shaking，要确保 BEM 类名没被误删 —— 所有 class 必须在 JS 模板或
index.html中真实出现，不能只存在于 CSS 文件里 - Vue3 的
v-bind:class动态绑定时，避免写成:class="`user-card__title ${isBold ? 'font-bold' : ''}`"——font-bold是 Tailwind 原子类，与 BEM 混用没问题，但必须确认它不和宿主的.bold冲突；更稳妥是统一走 BEM modifier：user-card__title--bold - 调试时别只看 DevTools 的 Computed Styles，重点看 Elements 面板的 class 列表 —— 如果
user-card__avatar根本没渲染出来，再规范的 CSS 也无效
