bem响应式应绑定到具体block而非全局，用媒体查询控制其内部元素变化；禁用设备后缀类名，改用上下文修饰符或css自定义属性驱动形态切换。
媒体查询里不能靠加新类名来响应式，得让原有BEM结构在断点内自然变化——否则类名爆炸、JS控制失焦、维护成本翻倍。
媒体查询必须绑定到具体 Block 或其 Modifier 上
所有响应式规则都该归属到它真正影响的 Block 范围内，而不是堆在全局 responsive.css 里。一个页脚列的堆叠逻辑，和导航栏的折叠毫无关系。
- ✅ 正确：
@media (max-width: 768px) { .site-footer__column { width: 100%; } }—— 只改页脚列，不波及其他模块 - ❌ 错误：
@media (max-width: 768px) { .button { padding: 8px 12px; } }—— 覆盖所有按钮变体，.button--large的语义直接失效 - ⚠️ 注意：如果某个 Block 在多个断点有不同行为，就在同一个 Block 块内写多组
@media，别拆到不同文件
修饰符（--mobile / --tablet）是反模式，别用
.block--mobile 这类类名看似直观，实则把设备类型硬编码进 HTML 和 CSS，一旦设计改用容器查询（@container）或适配用户偏好（如 prefers-reduced-motion），就得全局搜索替换，且无法被 JS 动态感知。
- ? 不要写：
el.classList.add('chart-card--mobile')—— 类名非法（@符号不合法），浏览器会忽略 - ✅ 应该做：用父级上下文触发变化，比如
.dashboard--compact .chart-card__body，再通过媒体查询切换.dashboard--compact - ? 真实场景：移动端折叠仪表盘卡片，不是给卡片加
--mobile，而是给外层容器加layout--narrow，卡片内部用.layout--narrow .chart-card__body控制高度
状态类（is-*）和响应式类不能混用
is-hidden 描述的是“此刻是否隐藏”，属于运行时状态；而响应式显示/隐藏是布局能力决定的，应由 CSS 媒体查询接管，不该靠 JS 切换类名来模拟。
- ❌ 错误：
@media (max-width: 480px) { .site-footer__link--hidden@sm { display: none; } }—— 后缀@sm不是合法类名，CSS 规则根本不会生效 - ✅ 正确：统一用媒体查询控制
display或visibility，HTML 里只保留基础类名site-footer__link - ⚠️ 容易冲突：
is-disabled和site-footer__link--disabled并存时，JS 控制一个，CSS 控制另一个，样式优先级难预料，删 class 也容易漏
复杂组件响应式靠嵌套上下文 + 自定义属性驱动
不要试图用 chart-card__body--collapsed-mobile 这种超长类名表达多维状态。BEM 的响应式本质是「上下文变了，样式跟着变」，不是「我给每个设备写一个新类名」。
- ✅ 推荐做法：
@media (max-width: 480px) { .chart-card { --chart-card-mode: compact; } }，再在 SCSS 中用.chart-card { &__body { max-height: calc(var(--chart-card-mode) == 'compact' ? 200px : none); } }（需配合 JS 或 CSS @property） - ? 更稳妥替代：
.chart-card--compact .chart-card__body { max-height: 200px; }，媒体查询只负责切 Modifier，样式逻辑留在 Block 内部 - ⚠️ 最易忽略：BEM 的响应式不是写一堆带设备后缀的类，而是让 Block 自己声明“我在什么条件下该换形态”，然后靠 CSS 自然承接
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
