如何用CSS媒体查询维护BEM组件的响应式样式

响应式开发必须统一使用 min-width 媒体查询并收口断点至变量，BEM 修饰符应表达语义化状态而非设备，媒体查询需包裹修饰符声明且 JS 应用 matchMedia 监听而非 resize。

媒体查询必须统一用 min-width，且断点数值收口到变量

混用 max-width 和 min-width 是响应式样式冲突的头号来源。比如同时存在 @media (max-width: 768px) 和 @media (min-width: 768px)，在精确 768px 宽度下两者都匹配，最终生效的是源码顺序靠后的规则——这不是设计，是不可控的巧合。

所有断点必须统一用 min-width，并定义为 Sass/Less 变量（如 $bp-md: 768px），禁止在 CSS 中硬写像素值或在类名里嵌入数字。

1. @media (min-width: $bp-md) 要放在整个组件样式文件的末尾，包裹所有修饰符相关声明
2. HTML 中只写语义化类名，如 card__content--stacked，不出现 --md、@lg 等断点标识
3. 团队必须同步维护一份 _breakpoints.scss，JS 里读取断点也应从此处导入，而非重复定义

BEM修饰符只表达状态意图，不绑定设备或断点

写 nav__list--mobile 或 card--desktop 是错的。这类名字把渲染环境（mobile/desktop）当成了状态，但 BEM 修饰符该描述的是「布局意图」或「视觉变体」，比如 nav__list--vertical、card--compact、card__content--stacked。

这些修饰符本身不生效，它们只是钩子；真正控制显示逻辑的，是外部 @media 块里对它们的引用。

1. nav__list--vertical 在 @media (max-width: 767px) 内才设 flex-direction: column
2. 同一个 card--compact 可以在桌面端控制 gap: 0.5rem，在移动端媒体查询中覆盖为 gap: 0.25rem，无需新增修饰符
3. 禁止出现 card--stacked@md 或 button--primary-sm 这类混合命名，浏览器根本不识别 @ 或 -sm 的语义

JS 动态切换修饰符时，必须监听 matchMedia，不能依赖 resize

用 window.addEventListener('resize', ...) 判断屏幕宽度再加类，性能差、易漏触发、且 SSR 场景下首屏渲染和 JS 执行不同步，导致 FOUC 或 layout shift。

正确方式是用 window.matchMedia() 创建媒体查询监听器，它能精准反映当前断点是否匹配，并天然支持服务端不执行（无副作用）。

1. 示例：const media = window.matchMedia('(max-width: 767px)'); media.addEventListener('change', e => el.classList.toggle('nav__list--vertical', e.matches));
2. React 中推荐用 useEffect + matchMedia 封装 Hook，避免每次 render 都新建监听器
3. 不要在 JSX 里拼接类名：className={`nav__list ${isMobile ? 'nav__list--vertical' : ''}`} ❌ —— 应交由媒体查询控制，JS 只负责初始状态同步

父级修饰符影响子元素样式时，必须显式带上上下文

导航从横向变成纵向后，.nav__item--active 样式失效，往往不是 JS 没加类，而是 CSS 规则没随布局变化升级选择器权重。

当父容器应用了 --vertical 修饰符，所有依赖该布局的子元素样式都需显式限定作用域，否则会被通用规则覆盖或因层级变化而失配。

1. 错误写法：.nav__item--active { background: #007bff; } —— 它在 .nav__list--vertical 下可能被忽略
2. 正确写法：.nav__list--vertical .nav__item--active { background: #007bff; padding: 1rem 0; }
3. 所有涉及布局变更的样式，都应检查是否遗漏父级修饰符前缀；grep nav__item--active 能搜到全部，但 grep .nav__list--vertical .nav__item--active 才能确认覆盖完整

BEM 响应式最难的不是写多少媒体查询，而是让每个修饰符都经得起“脱离断点单独使用”的检验——它得在任意上下文中语义自洽，而媒体查询只是决定它何时出场。