移动端必须用BEM而非“差不多的类名”，因其通过block前缀天然规避宿主全局样式覆盖（如.text、.btn），避免Android X5/iOS WebView下样式莫名失效；单类名选择器提升匹配性能，Chrome DevTools中通过Computed面板搜属性可3秒定位生效规则。
为什么移动端必须用 BEM 而不是“差不多的类名”
因为移动端 WebView（尤其 Android X5 内核）会从宿主 App 注入全局样式，.text 或 .btn 这类泛化类名极易被意外覆盖；而 user-card__title 天然不匹配宿主规则，样式不会“莫名失效”。iOS Safari 对伪类和 :nth-child() 的解析也更弱，BEM 单类名选择器（如 tab-bar__item--active）靠哈希查找一次命中，避免逐级回溯带来的卡顿。
Chrome DevTools 里怎么 3 秒定位真实生效样式
别在 Styles 面板里滚动翻找——那里展示的是所有匹配项，不是最终胜出的规则。直接切到 Computed 标签页，搜 font-size 或 opacity，带小箭头的那条就是实际生效的 BEM 规则，点击就能跳转源码。
- 搜修饰符必须输全名：
input--disabled比搜disabled准，避免命中第三方库的.disabled - 按住
Ctrl（Windows）或Cmd（macOS）再点击Styles里的任意属性值，能直接跳到该属性最终来源（含@import路径） - 常见错误：改了
user-card__avatar--loading的opacity没生效？大概率是另一条更晚加载或带!important的规则覆盖了它；搜opacity比检查拼写快得多
移动端轮播图这类组件，BEM 怎么划清容器、轨道、指示器职责
命名不是为了套格式，而是让每个 CSS 类只干一件事：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
carousel__container：只设overflow: hidden、position: relative，不参与位移 -
carousel__track：包裹所有carousel__slide，用transform: translateX()或scrollLeft实现滚动，必须设display: flex或white-space: nowrap -
carousel__indicator：是轮播图的子功能单元，不是独立块；激活态用carousel__indicator--active，而非carousel__indicator-active（后者破坏 BEM 解析逻辑） - 垂直轮播不该用
carousel--vertical修饰符——交互逻辑、指示器排布、分页方式都不同，应另起块名carousel-vertical
BEM 在 JS 动态操作时最容易被忽略的断点
getComputedStyle() 返回的是计算值，不带原始类名信息。比如按钮加了 button--large 设 padding: 16px，调用 getComputedStyle(btn).padding 只看到 "16px"，完全不知道它来自哪个 BEM 类——这是移动端调试中最容易忽略的断点。
立即学习“前端免费学习笔记（深入）”；
所有 BEM 类必须显式写在模板中，不要用 JS 拼接后塞进 innerHTML：WebView 下这类插入不触发 CSSOM 更新，样式不会生效，但 DevTools 里 class 属性看着还在，容易误判。
