移动端响应式状态必须靠JS主动切换BEM Modifier类，因媒体查询不会自动添加类名；需用window.matchMedia监听并首次加载即检查，Modifier应表达布局意图而非交互动作，多状态叠加时CSS须显式带父级前缀，且Modifier名禁用设备前缀。
移动端响应式状态必须靠 JS 主动切换 Modifier 类
BEM Modifier（如 nav__list--mobile）本身不带响应行为，它只是 CSS 的钩子。页面在小屏下没折叠，大概率不是 CSS 写错了，而是 HTML 里压根没加上这个类——媒体查询不会自动往 DOM 上塞类名。
常见错误现象：写了 @media (max-width: 768px) { .nav__list--mobile { flex-direction: column; } }，但 <ul class="nav__list"> 始终没变成 <ul class="nav__list nav__list--mobile">，样式自然不生效。
- 用
window.matchMedia('(max-width: 768px)')监听视口变化，匹配时调用element.classList.add('nav__list--mobile')，不匹配时.remove() - 首次加载也要检查一次，避免页面渲染后才监听导致闪屏
- 别依赖
:is()或容器查询（@container），当前主流 SSR 框架和 CMS 输出的 DOM 几乎都不支持
Modifier 名要表达布局意图，而不是交互动作
nav__list--mobile 是对的，nav__list--collapsed 是错的。前者表示“这是为移动视口设计的布局变体”，后者暗示“用户点了汉堡图标才收起”，二者生命周期和触发逻辑完全不同。
一个导航可能同时需要两种状态：nav__list--mobile（布局级，随屏幕尺寸自动生效） + nav__list--expanded（交互级，用户点击后临时叠加）。它们可以共存，但不能混用。
立即学习“前端免费学习笔记（深入）”；
-
--mobile类应在 JS 中由媒体查询驱动，页面加载即确定 -
--expanded类应由用户操作（如 click）触发，且需配套max-height过渡动画 - 如果只写
nav__list--expanded而没加--mobile，移动端垂直堆叠结构就没了基础支撑
多状态叠加时，CSS 必须显式带上父级 Modifier 前缀
当导航进入移动端并激活某个菜单项，HTML 可能是 <ul class="nav__list nav__list--mobile"><li class="nav__item nav__item--active">。但如果你只写了 .nav__item--active { background: #007bff; }，在 --mobile 下很可能被覆盖或失效。
原因在于布局变更后，选择器权重或嵌套层级变了，通用规则不再命中。
- 所有依赖布局状态的样式，都得显式前缀：
.nav__list--mobile .nav__item--active和.nav__list--desktop .nav__item--active分开写 - 禁止靠隐式继承，比如假设
.nav__item--active在任何布局下都该蓝底白字——移动端可能需要更大 padding 或不同圆角 - 多个 Modifier 共存时（如
nav__list--mobile nav__list--expanded），每个组合都要单独测试，不能只测单个
REM/VW 适配下，Modifier 类名绝不能带设备前缀
不要写 btn--primary-mobile 或 card--stacked-tablet。BEM 的 -- 修饰符是语义开关，不是断点映射表；真正该响应的是单位和根字号，不是类名本身。
REM 方案中，html { font-size: calc(16px * (100vw / 375px)); } 一改，所有 rem 值自动缩放；VW 方案里，padding: 2vw 也随视口连续变化。硬编码设备前缀只会让维护成本翻倍，且 JS 动态调整根字号后，类名切换反而成了干扰项。
- 合法修饰符只有
btn--primary、btn--disabled、btn--loading这类与状态/意图强相关的命名 - 如果真需要小屏隐藏某元素，直接用
@media (max-width: 375px) { .nav__icon { display: none; } }，别新增--mobile-hidden - 构建工具（如 PurgeCSS）依赖
--模式识别修饰符，带设备前缀的类名容易被误删
实际项目中最容易被忽略的，是 Modifier 类名与媒体查询的同步时机——JS 添加类和 CSS 加载完成之间存在微小延迟，尤其在低端安卓机上，可能导致首屏布局跳变。建议把关键响应式 Modifier 的初始状态判断逻辑放在 <head> 内联脚本中执行，而非等 DOMContentLoaded。
