移动端bem需将小屏样式绑定到块或元素自身，如card--mobile或card__content--mobile，避免依赖dom层级的媒体查询；所有@media必须收口在块css内，小程序需设styleisolation: 'apply-shared'确保生效。
移动端用 BEM 不是加响应式就完事，关键在于把「小屏专属样式」绑定到块或元素本身，而不是靠媒体查询里堆后代选择器。
为什么 @media 里写 .card .title 在移动端会失效
浏览器匹配选择器是从右往左的，.card .title 这种写法依赖 DOM 层级，一旦组件被抽成自定义元素、或用 Web Components 封装，层级就断了；更常见的是：同一套 HTML 在小程序、PWA、WebView 里跑，结构微调后样式直接不生效。
- 移动端真机调试时经常发现 DevTools 里规则“划掉”但没报错——其实是选择器根本没匹配上任何节点
- 用
display: none隐藏大屏元素、再用display: block显示小屏版本？这会让 SSR 渲染出无用 DOM，首屏性能受损 - 真正该做的，是让小屏逻辑成为块自身的一部分：
card--mobile或card__header--compact，而非靠外部容器判断
card__content--mobile 和 card--mobile 怎么选
取决于变化范围。修饰符必须作用在它真正影响的层级上，不能“越级控制”。
-
card--mobile：整个卡片结构重排（比如从横向图+文变成纵向）、边距/圆角全变——这是块级状态，适用 -
card__content--mobile：只改内部文字行高、内边距、字体大小——这是元素级调整，更精准，也方便和其他修饰符组合（如card__content--mobile card__content--error） - 别写
card__content--mobile-layout：layout 是结构词，不是状态，BEM 要求修饰符描述可开关的业务状态（--compact、--collapsed、--touch），不是实现方式
如何避免 @media 规则散落在十几个文件里
BEM 不禁止媒体查询，但要求它和块强绑定。所有移动端逻辑必须收口在块的 CSS 文件内，不能靠全局 responsive.css 补刀。
- 每个块的样式文件结尾统一加媒体查询区块：
@media (max-width: 768px) {<br> .card { margin: 0; }<br> .card__header { padding: 12px 16px; }<br> .card__image { width: 100%; }<br>} - 禁止在
base.css或utils.css里写@media (max-width: 768px) { .text-center { text-align: left } }——这等于把响应式逻辑和语义解耦，后续改.text-center的用途时，移动端行为就失控 - 如果某元素在小屏下需要完全不同的结构（比如抽成
collapsible-section），那就新建 Block，别硬塞进原块的修饰符里
小程序 + BEM 移动端适配最容易漏的配置
微信小程序默认 styleIsolation: 'isolated'，你写了 card--mobile 类，样式根本穿不进子组件，更别说生效了。
- 必须在父页面或容器组件中显式设
styleIsolation: 'apply-shared'（推荐）或'shared' - Vue SFC 中这样写：
<script><br>export default {<br> options: { styleIsolation: 'apply-shared' }<br>}</script> - 设完之后，
::v-deep .card--mobile才真正起作用；否则你在 DevTools 里看到类名存在，但 computed styles 里压根没这条规则 - 别在
app.vue全局设shared——整个项目样式边界就塌了，第三方组件可能意外被覆盖
最难的不是写出 card__footer--mobile，而是确保团队所有人理解：这个修饰符不是“给小屏看的”，而是“当设备进入触控窄屏上下文时，footer 应该启用紧凑模式”——状态语义必须比设备尺寸更稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
