移动端适配不应使用--mobile修饰符，bem的--仅表达组件自身状态；应采用语义化修饰符如card--layout-stack配合@media控制布局，轮播指示器须严格命名carousel__indicator并用carousel__indicator--active表示激活态，垂直轮播应新建carousel-vertical块而非carousel--vertical，避免嵌套选择器以提升性能。
移动端适配不能靠--mobile修饰符
直接写card--mobile或button__label--mobile是错的——BEM 的 -- 只表达组件自身状态（如button--disabled），不承担设备类型判断。把“mobile”塞进类名，等于让 CSS 类同时管环境、状态、样式三件事，后续改断点、换设计稿、加小程序平台时，你得同步改类名、改@media、改 JS 判断逻辑，三处漏一就出 bug。
真正该做的，是用语义化修饰符当钩子，再由@media驱动：
-
card--layout-stack表示“当前卡片采用堆叠布局”，不带任何尺寸含义 - 在 CSS 里统一用
@media (max-width: 768px) { .card--layout-stack { flex-direction: column; } } - JS 可根据
window.matchMedia动态增删这个类，但类名本身不变
轮播图指示器必须用carousel__indicator命名
移动端轮播的 dots 元素常被误写成dot、carousel-indicator或carousel__dot。这会导致事件委托失效、样式泄漏、构建工具报错。
正确命名必须严格遵循 BEM 层级：
- 指示器是轮播容器的子功能单元，不是独立块 → 必须是
carousel__indicator - 激活态用
carousel__indicator--active，不是carousel__indicator-active（后者破坏双下划线语法） - 所有触摸事件（如
touchstart）应委托到.carousel__indicator上，命名不统一就绑不准
垂直轮播不该用--vertical修饰符
写carousel--vertical看似省事，实际会让 CSS 和 JS 膨胀：指示器要从横向 dots 改为纵向 bar，滑动方向从swipeX变成swipeY，分页逻辑也不同。一个修饰符扛不住这些差异。
更合理的方式是另起新块：
- 水平轮播保持
carousel块名 - 垂直场景新建
carousel-vertical块，而非carousel--vertical - 复用基础工具类（如
is-hidden），但不共享结构样式
这样 CSS 更轻、JS 分支更少、设计师改需求时也不会牵一发而动全身。
BEM 类名本身不影响性能，但嵌套选择器会
card__title 这种长名字不会拖慢渲染——浏览器解析的是选择器结构，不是字符长度。真卡顿来自错误用法：
- 写
.card .card__title而非直接用.card__title - 在列表中大量出现
.page-home .layout-main .card .card__title这种四层祖先链 - 用
[data-loading]这类属性选择器替代button--loading类切换
移动端尤其要注意：低性能安卓机上，过长回溯匹配会明显增加重排开销，而!important和内联 style 会让 CSSOM 缓存失效，比嵌套更伤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
