BEM响应式逻辑不应写在修饰符里，而应由布局上下文或组件自身状态触发。媒体查询需绑定到具体Block或其Modifier，状态类与响应式类不可混用，复杂组件应通过嵌套上下文和CSS自定义属性实现响应式。
响应式逻辑不该写在修饰符里
BEM 的 --mobile、--tablet 这类修饰符是反模式。它们把设备类型硬编码进类名，一旦设计改用容器查询或用户偏好（比如 prefers-reduced-motion），就得批量重命名。真正该做的，是让响应式行为由布局上下文触发，比如给根容器加 layout--sidebar-collapsed，再让 .layout--sidebar-collapsed .sidebar 改变 display 或 width。
媒体查询必须绑定到具体 Block 或其 Modifier 上
不要把所有响应式规则堆在全局 responsive.css 里。每个 Block 自己管自己的断点逻辑：
-
@media (max-width: 768px) { .site-footer__column { width: 100%; } }—— 列堆叠只影响页脚，不波及其他模块 -
@media (hover: hover) { .button--primary:hover .button__icon { transform: scale(1.1); } }—— 悬停动画只属于按钮，且依赖交互能力而非设备宽度 - 避免写
@media (max-width: 768px) { .button { padding: 8px 12px; } }—— 这会覆盖所有按钮变体，破坏button--large的语义
状态类和响应式类不能混用
is-hidden、is-loading 是纯状态类，它描述“现在是什么”，和屏幕尺寸无关；而 site-footer__column--hidden@sm 这种带断点后缀的类，本质是响应式变体，应统一用 CSS 媒体查询控制 visibility 或 display，而不是靠 JS 动态加删类名。
容易踩的坑：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 用
el.classList.add('site-footer__column--hidden@sm')—— 后缀@sm不是合法 CSS 类名，会被浏览器忽略或截断 - 把
is-disabled和site-footer__link--disabled并存 —— 重复定义同一状态，JS 控制时易冲突 - 在 SCSS 中用
@each自动生成--mobile/--tablet修饰符 —— 生成的类名无实际作用，只是增加 bundle 体积
复杂组件的响应式要靠嵌套上下文，不是靠类名层级
比如一个仪表盘卡片 chart-card，它的移动端折叠逻辑不应写成 chart-card__body--collapsed-mobile，而应：
- 保持基础类名不变：
chart-card__body - 用父级 Modifier 触发变化：
.chart-card--compact .chart-card__body { max-height: 200px; } - 在媒体查询中切换 Modifier：
@media (max-width: 480px) { .chart-card { --chart-card-mode: compact; } }，再用 CSS 自定义属性驱动样式
最易被忽略的一点：BEM 的响应式不是“给不同设备写不同类名”，而是“让同一个类名，在不同上下文中表现不同”——这要求你始终问一句：这个样式变化，是由谁的状态决定的？是组件自身，还是它的容器？答案决定了该把媒体查询写在哪一层。
