正确做法是用语义化修饰符（如--narrow、--compact）表达意图，统一用min-width媒体查询并收口断点变量，避免硬编码和命名爆炸，类名保持稳定，行为由@media和matchmedia协同驱动。
修饰符不能叫 --mobile 或 --desktop
浏览器根本不认识 --mobile 这类名字——它只是字符串，不会自动关联任何断点行为。真正起作用的是 @media 规则本身，不是类名后缀。
常见后果包括：
- 重构时要全局搜索替换
@sm/@lg，一漏就错 - 不同组件对“medium”理解不一致：有的指
768px，有的指840px - 新增折叠面板时，冒出
panel--collapsed@md--dark@lg这种命名爆炸式组合，无法维护
正确做法是用语义化修饰符表达意图：--narrow、--compact、--stack，它们描述布局密度或视觉关系，不绑定设备。
@media 必须统一用 min-width，且收口到变量
混用 max-width 和 min-width 极易引发覆盖冲突。比如同时存在 @media (max-width: 768px) 和 @media (min-width: 768px)，在精确 768px 宽度下两者都匹配，最终生效的是源码顺序靠后的规则——这完全不可控。
推荐做法：
- 全项目统一用
min-width，断点设为768px、992px、1200px这类逻辑宽度 - 所有断点数值必须收口到统一变量（如
$bp-md: 768px），禁止硬编码在类名或 CSS 中 -
@media块统一放在 CSS 文件末尾，包裹所有断点相关的修饰符声明
注意：@media (min-width: var(--bp-md)) 是无效语法，CSS 变量不能用于媒体查询条件。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
grid-template-areas 不要塞进类名
把 "header main sidebar" 塞进类名如 .layout--header-main-sidebar，等于把样式逻辑硬编码进 HTML，失去维护弹性。
正确方式是让类名稳定，只靠媒体查询改声明：
- HTML 中始终用
<div class="dashboard"><div class="dashboard__sidebar"></div></div> - CSS 中
.dashboard { display: grid; }，然后在@media块里分别写：@media (max-width: 768px) {<br> .dashboard { grid-template-areas: "header" "main" "sidebar"; }<br>}
类名不变，布局随断点动——调试时搜 dashboard__sidebar 就能定位所有相关样式和模板。
JS 切换修饰符必须配合 matchMedia 监听
BEM 修饰符本身不带行为，它只是视觉钩子。如果写了 .nav__list--mobile { display: flex; flex-direction: column; }，但 HTML 中 <ul class="nav__list"></ul> 始终没加上 --mobile，浏览器当然不会应用样式。
实操要点：
- 用 JS 监听
window.matchMedia('(max-width: 768px)')，当匹配时给元素添加对应修饰符类，不匹配时移除 - 不要依赖
:is()或@container自动推导状态——当前主流框架和 CMS 输出的 DOM 很少自带容器查询支持 - 确保
<meta name="viewport" content="width=device-width, initial-scale=1.0">已声明，否则移动端永远按桌面宽度渲染
最易被忽略的一点：BEM 的响应式不是“给不同设备写不同类”，而是“用同一套语义类，在不同断点下激活不同表现”——类名稳定，行为由媒体查询和 JS 状态协同驱动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
