BEM 在 Hybrid App 中是防样式劫持的保命线，而非加分项；其类名必须原样存在于 DOM，禁用 scoped、cssModules、动态拼接及通配符选择器，确保全程不被改写或删减。
在 Hybrid App 的 WebView 里，user-card__title 被宿主 .text { color: #666 !important; } 覆盖，不是你 CSS 写错了，而是没用 BEM 隔离——这是最常被忽略的「失效起点」。
为什么 Hybrid 中 BEM 不是加分项，而是保命线
BEM 在纯 H5 里能防冲突，在 Hybrid 里是防「样式劫持」。WebView 容器天然被宿主注入全局样式（比如微信、支付宝、自研壳），且多个 H5 页面复用同一实例，CSS 加载顺序不可控。此时：
• .header 可能被前一页的同名 class 覆盖
• .card__title 若没加 BEM 前缀，就会匹配宿主的 .text 或 .title
• iOS 正常、Android X5 内核下全变灰，大概率就是这类匹配导致
关键不是“要不要用”，而是：BEM 类名必须真实出现在 DOM 中，且不能被构建或运行时工具篡改。
uni-app / Taro 中 BEM 失效的三个典型原因
很多项目写了 BEM，但构建后根本不起作用，问题往往出在工具链：
立即学习“前端免费学习笔记（深入）”；
- uni-app 启用了
scoped模式：它把.user-card__title编译成.user-card__title[data-v-abc123]，BEM 的命名隔离失效，反而增加兼容风险，且宿主 JS 无法识别该类名 - Taro 开启了
cssModules：类名被哈希成styles['user-card__title_abc']，JS 动态操作classList.toggle('user-card__title')直接报错 - 埋点 SDK 或安全插件清洗了
class属性：DOM 里class="user-card user-card--active"被清空或转驼峰，BEM 彻底归零
验证方式很简单：打开 WebView 控制台 Elements 面板，确认 class 是原样字符串，不是空值、不是驼峰、没被 data-* 属性包裹。
别写嵌套选择器，BEM 的元素本就该独立存在
常见错误是把 BEM 当语法糖，写成 .user-card .user-card__title 或 .user-card > .user-card__title。这不仅没带来语义增益，反而触发移动端 CSSOM 回溯匹配，列表渲染时性能明显下降。
正确做法是直接使用 .user-card__title，靠命名本身表达归属关系。需要作用域控制时：
- Vue 项目用
:where(.user-card) .user-card__title（现代浏览器） - 兼容性要求高时，用
.user-card__title+ 父容器 class 控制显示逻辑，而非选择器嵌套 - 禁用
*[class^="icon-"]这类通配符+属性前缀，在低端 Android WebView 里可能阻塞样式解析
动态拼接 class 是 BEM 最危险的破口
写 el.className = 'user-card__' + type + '--' + state 看似灵活，实则破坏 BEM 的可追溯性和安全性：
- type 来自接口未过滤 → 注入
user-card__title" onerror=alert(1)，XSS 风险直接落地 - innerHTML 插入的 class 不触发 CSSOM 更新，样式不生效（尤其在 React Native WebView 中）
- 构建工具无法静态分析，PostCSS 插件如
postcss-bem-linter失效，CI 拦截形同虚设
所有 class 必须显式写在模板中：<div class="user-card user-card--loading">，哪怕多几行，也比运行时拼接可靠。
真正难的不是写出 user-card__title，而是确保它从源码、构建、注入、渲染到 JS 操作，全程不被任何环节改写、删减、哈希或转义。
