移动端用BEM不是为美观，而是防止WebView中样式突然失效、层级错乱、伪类不触发；因宿主App注入的.text等泛化类名易覆盖业务样式，而user-card__title等带块前缀命名天然隔离，且单类名选择器哈希查找一次命中，Chrome DevTools中Computed面板搜属性可3秒定位生效规则。
移动端开发中用 BEM 不是“更好看”，而是防止样式在 WebView 里突然失效、层级错乱、伪类不触发——这些都不是 bug，是选择器耦合失控后的必然结果。
为什么 Android X5 / iOS WebView 下 .text 会莫名被覆盖
宿主 App（比如微信、支付宝）会在 WebView 启动时注入全局 CSS，.text、.btn 这类泛化类名极易命中宿主规则，导致你的样式被覆盖且无提示。而 user-card__title 这种带块前缀的命名天然不匹配宿主选择器，隔离性是写死在类名里的。
- Android X5 内核对
@import和层叠顺序处理更粗暴，单类名选择器（如tab-bar__item--active）靠哈希查找一次命中，避免回溯失败 - iOS Safari 对
:nth-child()和复杂伪类解析弱，BEM 强制用单类名 + 修饰符，绕过解析陷阱 - 查问题时直接在 Chrome DevTools 的 Computed 面板搜
font-size，带小箭头的那条就是真实生效的 BEM 规则，点击跳转源码，不用滚动 Styles 面板翻几十行
为什么 BEM 能缓解 position: fixed 层级错乱
移动端 fixed 元素错位，90% 源于父容器用了 transform 或 will-change 创建了新层叠上下文，而嵌套选择器（如 .header .logo）让样式归属模糊，改一个 z-index 可能同时影响弹窗、导航栏、浮层三个模块。
- BEM 要求每个块根元素（如
header）独立控制自己的层叠上下文：header--sticky控制定位行为，header__logo只管自身尺寸和颜色 - 禁止
.header .header__logo这类链式写法，Sass 中写.header { &__logo { } }是安全的；但.header { & .header__badge { } }会编译出空格选择器，破坏隔离 - 构建后可用
grep -r "\.[a-z]\+ \.[a-z]" dist/快速扫出残留的嵌套选择器
为什么新人接手项目时，BEM 类名比注释还管用
看到 product-card__price--discounted，不用点开 HTML 就知道：这是 product-card 块里的 price 元素，当前处于 discounted 状态；而 .price 或 .discount 单独出现时，谁也不知道它属于哪个模块、是否已被其他页面劫持。
立即学习“前端免费学习笔记（深入）”；
- 文件名必须与块名一致：
product-card.css里只允许出现product-card、product-card__price、product-card--stacked等类名 - 修饰符必须是可枚举的业务状态：
user-card--compact✅，user-card__avatar--small❌（尺寸不是稳定状态，响应式下可能失效） - 工具链必须在保存时校验：写成
user_name或card-element，stylelint 和 VS Code BEM Helper 会立刻报错，不靠人工 Review
为什么轮播图这类动态组件必须用 BEM 划清职责边界
carousel__container、carousel__track、carousel__indicator 不是为好看而分，是让 JS 操作和 CSS 控制严格解耦：容器只管 overflow: hidden 和 position: relative，轨道负责 transform: translateX()，指示器只响应 carousel__indicator--active 切换。
- 垂直轮播不该用
carousel--vertical，因为交互逻辑、指示器排布、分页方式都不同，应另起块名carousel-vertical - JS 动态加 class 时，必须显式写在模板中，禁止拼接字符串塞进
innerHTML—— WebView 下这种插入不触发 CSS -
getComputedStyle()返回的是计算值，不带原始类名信息。按钮加了button--large设padding: 16px，调用getComputedStyle(btn).padding只看到"16px"，完全不知道来源 —— 这是移动端调试中最容易忽略的断点
BEM 的真正门槛不在命名格式，而在所有团队成员能否守住「块级隔离」这条线：不跨块写元素、不把具体值塞进修饰符、不依赖加载顺序来决定样式胜负。一旦松动，就退化成“带下划线的普通 CSS”。
