bem修饰符中不能嵌入媒体查询逻辑，因为类名中的@media或断点标识（如--hidden@md）仅为字符串，无法触发响应行为；修饰符仅表达状态，媒体查询需单独、集中定义并包裹对应样式规则。
不能在BEM修饰符中嵌入媒体查询逻辑——类名里写 @media 或断点标识（如 block--hidden@md）完全无效，浏览器只当它是普通字符串，不会触发任何响应行为。
为什么修饰符名里塞 @md 没用
BEM修饰符是纯命名约定，用于表达状态（如 button--disabled、card--featured），它本身不携带样式或条件逻辑。CSS 规则的生效与否，只取决于选择器是否匹配 + 外部媒体查询是否满足条件。把 @md 塞进类名，等于给类名加了个无意义后缀，既不能自动绑定断点，也无法被 CSS 引擎识别为媒体查询指令。
常见错误现象包括：
- 写了
header--fixed@sm却发现小屏下没固定——因为没配@media (max-width: 599px)规则 - 多个组件都用
--hidden@lg，但各处媒体查询写法不一致（有的用min-width，有的用max-width），导致行为错乱 - 重构时想统一改断点值，结果要满项目搜
@sm、@md，根本没法批量替换
正确做法：语义化修饰符 + 集中式 @media 控制
修饰符负责「叫什么」，媒体查询负责「什么时候起作用」。二者必须解耦，且媒体查询必须收口到统一位置。
实操建议：
- 修饰符名只表达意图，不暴露断点数值或设备词，例如用
nav--collapsed而不是nav--collapsed-on-mobile - 所有断点变量定义在
_variables.scss中，如$bp-sm: 480px、$bp-md: 768px，避免硬编码 - 用 mixin 封装媒体查询，如
@mixin media-down($bp) { @media (max-width: $bp - 1px) { @content; } }，确保逻辑复用和一致性 - 媒体查询块必须包裹整个 BEM 块的规则集，例如：
@include media-down($bp-md) { .nav-menu { display: none; } .nav-menu__trigger { display: block; } }
React + CSS Modules 场景下的陷阱
在组件级样式方案中，容易误以为「每个组件自己管自己的响应式」更方便，结果导致断点逻辑分散、无法全局调控。
关键约束：
- 禁止在组件样式文件里直接写
@media——必须通过@import引入统一的_breakpoints.scss - 修饰符类名需由 JS 状态控制（如
className={clsx('card', isStacked && 'card--stacked')}），而非靠媒体查询自动添加 - ESLint 必须启用
no-unused-vars和自定义规则，拦截字符串拼接类名（如`button--${size}@${breakpoint}`）
最容易被忽略的一点
修饰符的语义粒度必须正交且稳定——card--stacked 描述的是布局意图，不是「小屏才堆叠」；它可能在某个断点下被媒体查询启用，在另一个断点下被禁用，也可能被用户交互（如折叠面板）手动触发。一旦把响应条件写死在名字里，就丧失了复用性和测试可能性。真正难的不是写对一个断点，而是让同一套修饰符能在不同上下文中被不同条件驱动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
