媒体查询必须写在BEM选择器外部，不能嵌套在块规则内部；因CSS语法限制，@media不可作为.block子级存在，Sass编译提层只是假象，正确做法是将@media作为顶层容器包裹相关BEM元素。
媒体查询必须写在BEM选择器外部，不能嵌套在块规则内部
直接结论：@media 规则不能作为 BEM 块的子级写在 .block { ... } 里面——这不是语义问题，而是 CSS 语法限制：原生 CSS 不允许在样式规则块内嵌套 @media（Sass/SCSS 编译后会提层，但源码里嵌套只是假象）。
常见错误现象包括：
- 写成
.header { @media (min-width: 768px) { &__logo { width: 200px; } } }—— Sass 虽能编译，但生成的选择器是@media (min-width: 768px) .header__logo，实际已脱离.header的作用域控制 - 误以为“嵌套写法 = 逻辑归属”，结果多个组件都用相同断点，却各自写了重复的
@media，导致维护时改一处漏十处
正确做法是让 @media 成为顶层容器，包裹整个 BEM 块的响应式变体：
@media (min-width: 768px) { .header__logo { width: 200px; } .header__nav { display: flex; } }- 所有相关元素（
__logo、__nav、__cta）都在同一@media下声明，保持上下文一致 - SCSS 中可用
@at-root强制提层，避免被父选择器污染：.header { @at-root @media (min-width: 768px) { .header__logo { ... } } }
为什么不能把@media塞进.block规则体内
根本原因在于：CSS 是声明式语言，选择器权重和匹配行为由浏览器运行时解析决定，不是靠缩进或花括号嵌套来“隶属”。写在 .block { } 里的 @media，在标准 CSS 中根本无效；Sass 编译器只是把它当作语法糖自动提层，掩盖了真实作用域。
这会带来三个实际风险：
- 调试困难：开发者在 DevTools 里看到的是提层后的规则，但源码里却显示“嵌套在 .block 下”，心智模型错位
-
复用断裂：一个
.card组件被复用到不同布局中，如果它的@media错误地绑死在自身块内，就无法响应外层容器宽度（比如用在@container场景） -
编译膨胀：Sass 每次嵌套都会复制父选择器前缀，
.block { @media {... &__elem {...} } }可能生成冗余的.block .block__elem，而实际只需要.block__elem
媒体查询该绑定到 Block 还是 Modifier 上
必须绑定到具体 Block 或其 Modifier 上，而不是全局或抽象容器。例如页脚列堆叠逻辑只影响 .site-footer__column，就不该写成 @media (max-width: 768px) { .button { padding: 8px 12px; } }——这会破坏 .button--large 的语义。
Modifier 的响应式也必须由 @media 控制，而非类名带断点标识：
- ❌ 错误：
.site-footer__column--hidden@sm——@sm不是合法类名，浏览器忽略 - ✅ 正确：
@media (max-width: 480px) { .site-footer__column--hidden-below-sm { display: none; } }，HTML 中仅需class="site-footer__column site-footer__column--hidden-below-sm" - Modifier 名称只表达状态（
--hidden-below-sm），生效条件由@media独立控制，二者解耦
容易被忽略的关键点：断点值必须统一收口，不能硬编码
项目里每个 @media (min-width: 768px) 都应引用同一个变量，比如 SCSS 中定义 $bp-md: 768px，再用 @include media-up($bp-md)。否则一旦设计调整断点（如从 768px 改为 744px），就得满项目搜索替换，且极易遗漏。
更隐蔽的问题是混用 min-width 和 max-width：
- 同一断点下，
@media (max-width: 768px)和@media (min-width: 768px)在精确 768px 宽度时都会命中，最终谁生效取决于源码顺序 - 推荐全项目统一用
min-width，断点设为 768px、992px、1200px 这类“最小适用宽度”，语义清晰、无歧义
真正难的不是写对一行 @media，而是让所有组件的响应式逻辑共享同一套断点语义、同一套作用域边界、同一套命名约束——否则 BEM 就退化成了带下划线的普通类名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
