bem响应式核心是让同一类名在不同上下文中自然呈现不同形态，而非靠设备词修饰符；因--mobile等非法类名浏览器不识别，真正生效的是@media规则，且类名稳定可降低维护成本。
媒体查询里不用“复用”BEM类名，而是让同一组类名在不同断点下表现不同——类名不变，样式变。
为什么不能靠加新类名来响应式
写card--mobile或card__title--sm这类带设备词的修饰符，浏览器根本不会识别@sm、--mobile这些后缀；它们只是无效字符串。真正起作用的是@media规则本身，不是类名里的文字。
- 重构时要全局搜索替换
--mobile，漏一处就断掉 -
--tablet在不同组件里可能对应768px、840px甚至900px，语义彻底失焦 - JS里调
el.classList.add('card--mobile')，结果CSS里没定义这个类，白加
正确的媒体查询绑定方式
每个Block自己管自己的断点逻辑，媒体查询必须紧贴相关类名声明，不堆全局文件。
- 只用
min-width统一断点（如$bp-md: 768px），避免max-width和min-width交叠导致覆盖冲突 - 把
@media块放在对应Block的CSS末尾，比如.card样式写完，立刻跟一段@media (min-width: 768px) { .card { ... } } - 禁止在
@media条件里用CSS变量：@media (min-width: var(--bp-md))语法无效
示例：
.card { display: flex; }
@media (min-width: 768px) {
.card { flex-direction: column; }
.card__title { font-size: 1.25rem; }
}
修饰符该在哪加、怎么加
修饰符描述状态意图，不是设备类型；它由JS或媒体查询触发，但本身不携带断点信息。
- 状态类如
card--loading、menu__item--active，应由JS显式控制classList.toggle() - 布局意图类如
card--layout-stack、dashboard--compact，可由matchMedia监听后添加 - 绝对不要写
card__content--hidden@md——@md不是合法类名，浏览器会截断或忽略
嵌套组件的响应式怎么处理
内层网格或子组件不继承父级类名，而是升格为独立Block，各自绑定媒体查询。
-
.dashboard__sidebar保持类名不变，移动端改它的grid-area或display，不重命名 - 仪表盘里的卡片列表不是
dashboard__card-list，而是独立.card-grid块，有自己的@media块 - 避免
.dashboard__main-content .card-grid这种后代选择器——BEM不允许跨块依赖，样式必须单类名可运行
最易被忽略的一点：BEM响应式的关键不是“给不同屏幕写不同类名”，而是“让同一个类名，在不同上下文（媒体查询、父级Modifier、自定义属性）中自然呈现不同形态”。类名越稳定，维护成本越低。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
