bem是混合app中防止webview css失效的底线保障，通过命名隔离避免宿主样式覆盖、多页面冲突及构建工具破坏类名，要求类名静态写出、block名稳定唯一且不可跨宿主复用。
移动端混合开发中，CSS样式被原生 WebView 污染不是“写错了样式”，而是宿主 App 注入的全局样式（比如 .text、.header）直接命中你的 DOM 类名，且常带 !important —— 此时再调高优先级也无效，唯一解法是让选择器根本“不匹配”。
为什么 .card__title 在 iOS 正常、Android X5 下变灰？
根本原因不是兼容性问题，是宿主 WebView 主动注入了类似这样的样式：
div.text { color: #666 !important; }
而你的 <div class="card__title"> 恰好被这个规则捕获。BEM 命名不是为了“好看”，是为制造语义隔离：宿主几乎不可能定义 <code>.user-card__title，但极大概率有 .text 或 .title。
- uni-app / Taro 项目中，必须禁用
scoped模式——它生成的div[data-v-xxx] .card__title反而破坏 BEM 的原始类名可读性，且宿主 JS 脚本无法识别该属性 - React Native WebView 加载 H5 后，打开 Elements 面板，确认
class="user-card__title"是原样存在的，不是被埋点 SDK 或安全插件清洗为空字符串 - 所有 BEM 类名必须显式写死在模板里，禁止用 JS 拼接：
el.className = 'user-card__' + type不仅易 XSS，还会导致 CSSOM 不触发更新
如何防止第三方组件（如 van-popup）挂载到 document.body 后样式失效？
van-popup、van-datetime-picker 这类组件默认把 DOM 插入 document.body，绕过 Vue 的 data-v-xxx 属性机制，Scoped CSS 完全失效。CSS Modules 也救不了——因为新节点压根没走模块化流程。
- 给第三方组件套一层容器：
<div classname="{styles.popupWrapper}"><van-popup></van-popup></div> - 在
.module.css中只用:global()精准穿透：.popupWrapper :global(.van-popup) { z-index: 9999; } - 避免
:global(*)或宽泛选择器；若需影响弹窗内部按钮，写:global(.van-popup__confirm)而非:global(.van-button) - 对挂载到
body的弹窗，必要时加!important或提级到html .popupWrapper :global(...)确保层叠上下文覆盖宿主样式
为什么 link rel="stylesheet" 在 file:// 协议下常失效？
WebView 对本地 file:// 协议的缓存策略激进，且忽略 HTTP 响应头（包括 Cache-Control）。更麻烦的是，iOS WKWebView 和 Android WebView 解析 url() 的基准路径不一致：一个认 bundle root，一个认 assets 根目录。
- 放弃
<link href="./css/app.css">，改用 JS 动态注入内联样式（尤其首屏关键 CSS） - 若必须用
link，路径必须绝对：file:///android_asset/www/css/app.css（Android）或file:///var/containers/Bundle/Application/XXX/www/css/app.css（iOS） - CSS 中所有
url()必须写绝对路径：background: url("file:///android_asset/www/images/icon.png") - 构建时给 CSS 文件名加哈希（如
app.a1b2c3.css），否则 WebView 会永远读旧缓存
真正难的不是写出隔离的类名，而是确保它最终真实出现在 DOM 中——任何构建压缩、运行时清洗、动态拼接，都会让 BEM 失效。别信“写了就生效”，要真去 Elements 面板里看那一串字符是不是原封不动躺在 class 属性里。
