BEM是混合App中防止WebView CSS失效的底线保障，通过命名隔离避免宿主样式覆盖、多页面样式冲突及构建工具破坏类名，要求类名静态写出、block名稳定唯一且不可跨宿主复用。
在混合 App（Hybrid App）中，BEM 不是“让样式更好看”的可选规范，而是防止 WebView 中 CSS 突然失效的底线保障。不应用 BEM，user-card__title 在 iOS 正常、Android X5 内核下被宿主 .text 强制覆盖，就是大概率事件。
WebView 里 CSS 失效的根本原因不是写法错，而是没隔离
混合 App 的 WebView 容器天然不干净：宿主 App（如微信、支付宝、自研壳）会注入全局样式；多个 H5 页面复用同一 WebView 实例时，CSS 文件加载顺序不可控；uni-app 编译后 class 不带哈希，React Native WebView 也不自动作用域隔离。这些都不是你写的 CSS 有问题，而是选择器没边界。
-
.header可能被前一个页面的同名 class 覆盖，也可能被宿主div.header { margin: 0 !important; }暴力重置 - 现象：iOS 上字体颜色正常，Android X5 下全变灰 —— 根本不是兼容性问题，是宿主
.text { color: #666 !important; }匹配到了你的card__title - BEM 的
user-card__title天然不匹配宿主的.text，无需优先级对抗，靠命名隔离就生效
uni-app / Taro / React Native WebView 中 BEM 类名必须真实出现在 DOM
写了 card__content 不等于它真在 HTML 里。很多项目构建后类名被 PostCSS 删掉、被 cssModules 哈希成 card__content_abc123，或被埋点 SDK 动态清洗掉 class 属性 —— 这些都会让 BEM 彻底失效。
- uni-app 中禁用
scoped模式：它用属性选择器模拟作用域（如div[data-v-abc] .card__title），但 BEM 本身已靠命名隔离，反而增加兼容风险且无法被宿主 JS 识别 - Taro 若启用
cssModules，必须关闭 —— 否则styles['card__title']在运行时查不到原始类名，JS 控制状态（如classList.toggle('card__title--loading')）直接报错 - React Native WebView 加载 H5 后，打开控制台 Elements 面板，确认
class="user-card user-card--active"是原样存在的，不是被第三方脚本改成了空字符串或驼峰格式
不要动态拼接 BEM 类名，所有 class 必须显式写在模板中
用 JS 拼 el.className = 'user-card__' + type + '--' + state 看似灵活，实则破坏 BEM 的可追溯性和安全性。
- 易 XSS：若
type来自接口返回，未过滤就拼进 class，可能注入恶意字符串 - WebView 下 innerHTML 插入的 class 不触发 CSSOM 更新，样式不会生效
- 调试困难：搜
user-card__avatar找不到定义位置，因为它是运行时生成的 - 正确做法：在模板中静态写出完整类名，如
<img :class="['user-card__avatar', {'user-card__avatar--loading': isLoading}]">，或用clsx统一管理
与宿主共存时，BEM 的 block 名是隔离墙，不是装饰
你不能复用宿主提供的 .nav-bar 再加 __title，这属于跨 block 依附，违反 BEM 原则，也极不稳定。
- 宿主某次升级把
.nav-bar改成.top-nav，你的.nav-bar__title就彻底失联 - 正确做法：用 wrapper 包一层，比如
<header class="myapp-header"><div class="myapp-header__title">首页</div></header>，block 名myapp-header全局唯一、自主可控 - 禁止出现
--ios-fix或--mobile-only这类修饰符 —— 它们暴露的是浏览器 bug，该用@supports或 UA 检测解决，而不是塞进 class 名
真正容易被忽略的，是 BEM 的 block 名必须稳定到“上线后不能轻易改”。一旦 user-card 重构为 profile-card，所有模板、JS 选择器、测试用例都得同步更新 —— 所以它不是命名习惯，是契约，是团队协作的硬性接口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
