BEM在移动端CSS中是防崩刚需，因其能解决position: fixed层级错乱、DPR下font-size失准、iOS Safari伪类失效等由选择器耦合引发的隐蔽问题。
为什么BEM在移动端CSS里不是“可选”，而是防崩刚需
因为移动端样式冲突比桌面端更隐蔽、更难复现——position: fixed叠加层级错乱、font-size在不同DPR下缩放失准、伪类在iOS Safari里不触发，这些问题90%都源于选择器耦合过深。BEM强制把组件边界划清楚，不是为了“规范”，是让.header__logo--large永远只管自己，不被.sidebar .logo意外覆盖。
常见错误现象：margin-top在某个页面突然失效，查半天发现是父级.card里写了* { box-sizing: border-box }，而子组件用的.card__content又依赖content-box；或者改一个按钮颜色，结果所有.btn全变色，包括弹窗里的关闭按钮。
- BEM不等于套模板：不用硬套
block__element--modifier三段式，关键在「块级隔离」——每个组件根类名必须唯一且不带上下文（比如别写.article-list__item，直接.list-item，靠父容器.article-list来限定作用域） - 移动端要砍掉所有无意义嵌套：禁止
.card .card__header .card__title这种三层链式，改成.card__header和.card__title平级，否则在低性能安卓机上重排会卡顿 - Modifier命名必须可预测：
.button--primary可以，.button--ios-fix不行；后者说明你已经在用CSS修浏览器bug，该抽成@supports或JS检测
怎么用BEM写真正轻量的移动端CSS
轻量不是删代码，是让每行CSS都有明确归属和退出路径。移动端首屏加载时间敏感，冗余选择器会拖慢解析速度，尤其在WebView里。
使用场景：开发一个响应式tab-bar组件，需适配iPhone窄屏和Pad横屏，还要支持夜间模式切换。
立即学习“前端免费学习笔记（深入）”；
- 根元素用
.tab-bar，不加任何修饰；所有子元素必须以.tab-bar__开头，如.tab-bar__item、.tab-bar__icon - 状态类只挂根元素：
.tab-bar--dark控制整体主题，.tab-bar__item--active控制当前项，禁止出现.tab-bar--dark .tab-bar__item这种跨层组合 - 媒体查询写在组件内部：
@media (min-width: 768px) { .tab-bar__item { flex: 1 } }，而不是提一层到全局断点变量，避免编译后生成大量未使用CSS - 慎用
&嵌套：Sass/Less里.tab-bar { &__item { ... } }看着省事，但编译后仍是独立选择器，没节省体积；真要减体积，用PostCSS插件自动提取重复声明
BEM遇上CSS自定义属性，哪些坑会直接让热更新失效
很多人用--tab-bar-bg-color这类自定义属性配合BEM，以为更灵活，结果HMR（热模块替换）时样式不刷新，或者iOS 14.5以下机型完全不生效。
根本原因：自定义属性继承机制和BEM的块级隔离天然冲突。比如.tab-bar设了--bg: #fff，但.tab-bar__item里又写了background: var(--bg)，一旦父级被JS移除（如路由切换），子元素就回退到初始值，且无法被CSS-in-JS工具正确追踪。
- 只在根块级设自定义属性：
.tab-bar { --tab-bar-height: 48px; }，子元素用height: var(--tab-bar-height)，别在.tab-bar__item里再设新变量 - 避免动态拼接变量名：
var(--tab-bar-color-<code>theme)这种写法在CSS里无效，JS注入也不稳定；改用.tab-bar--night+:root[data-theme="night"]双保险 - PostCSS插件
postcss-custom-properties默认不处理calc()里的变量，比如width: calc(100% - var(--tab-bar-height))在旧版Android WebView里会直接当无效声明丢弃
要不要用BEM工具链？先看这三件事有没有手动解决
工具链不是银弹。很多团队上了eslint-plugin-bem或stylelint-selector-bem-pattern，结果CI天天报错，开发者绕过规则写div.tab-bar__item完事。
真正卡住效率的从来不是语法，而是协作断点：
- 组件根类名是否在设计系统文档里明确定义？比如
modal还是dialog，前端和UI必须对齐，否则.modal__overlay和.dialog__backdrop实际是同一物，却各自维护两套样式 - 有没有禁止
!important的CI检查？BEM失效最常见路径就是某人加了个!important强行覆盖，后面所有人只能跟着加，最后满屏!important - 构建时是否剥离未使用的BEM类？比如
.button--loading只在登录页用，但打包进了所有页面的CSS；得靠PurgeCSS配置content: ["**/*.html", "**/*.js"]精准扫描
复杂点在于：BEM的「块」不是按视觉切分，而是按数据流切分。一个search-input组件，如果搜索建议列表由另一个服务异步渲染，那.search-input__suggestion就不该属于它——建议列表得有自己的.suggestion-list块。这点容易被忽略，一写错，后续所有状态管理都得返工。
