不能将断点值塞入BEM修饰符名，因浏览器不识别如@md等后缀，响应式必须由@media显式控制；修饰符只表达状态意图，断点需统一变量管理并由JS监听matchMedia切换类名。
为什么不能把断点值塞进BEM修饰符名里
类名里写 card--stacked@md 或 nav--fixed-on-mobile 看似直观，实际会让样式逻辑锁死在特定设备假设中。浏览器根本不识别 @md 这种后缀——它只是字符串，不会触发任何媒体查询行为。真正起作用的，永远是 @media 规则本身，而不是类名里的“注释”。
常见后果包括：重构时要全局搜索 @sm/@lg 替换断点值；不同组件对“medium”理解不一致（有的指 768px，有的指 840px）；新增折叠面板时，发现得组合出 panel--collapsed@md--dark@lg，命名爆炸且无法维护。
- 修饰符只表达「状态意图」，比如
card--layout-stack、nav--collapsed - 断点数值必须收口到统一变量（如
$bp-md: 768px），不能硬编码在类名或 CSS 中 - 所有响应式行为必须由
@media显式包裹，不能依赖类名“暗示”
如何用BEM修饰符配合媒体查询做状态切换
BEM 修饰符不是媒体查询的替代品，而是它的语义化接口。它不决定“何时切换”，但明确定义“当前处于什么布局意图”。关键动作是：JS 或服务端监听 matchMedia，匹配时显式添加/移除修饰符类名。
比如侧边栏缩略状态，应操作 .sidebar--collapsed 这个块级修饰符，而非给每个子项加 .sidebar__item--collapsed。这样动画、无障碍属性（aria-expanded）、过渡效果都能集中控制。
立即学习“前端免费学习笔记（深入）”；
- 监听
matchMedia('(max-width: 768px)')，回调中用element.classList.toggle('nav--mobile-active', matches) - CSS 中只写
.nav--mobile-active { display: flex; }，不混入其他非该状态相关的样式 - 避免在
@media块里写组合选择器，如.nav--mobile-active .nav__link是允许的，但.nav__list--mobile .nav__link就破坏了修饰符的独立性
媒体查询写法必须统一，否则样式会不可预测
混用 max-width 和 min-width 断点极易引发覆盖冲突。例如同时存在 @media (max-width: 768px) 和 @media (min-width: 768px)，在 768px 精确宽度下两者都匹配，最终生效的是源码顺序靠后的规则——这完全不可控。
推荐全项目统一用 min-width，断点设为 768px、992px、1200px 这类逻辑宽度，并确保 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 已声明。没有它，移动端永远按桌面宽度渲染，@media 形同虚设。
- 禁止在
@media条件中使用 CSS 变量，@media (min-width: var(--bp-md))是无效语法 -
calc()只支持长度单位运算，(min-width: calc(50vw + 10px))合法，calc(1rem + 1em)报错 - 所有断点相关
@media块必须包裹整个 BEM 块的规则集，不要只改其中一两个属性
React + CSS Modules 场景下最容易忽略的约束
组件级样式方案容易让人误以为“每个组件自己管响应式更方便”，结果断点逻辑分散、无法全局调控。核心约束就两条：禁止在组件样式文件里直接写 @media；修饰符类名必须由 JS 状态驱动，不能靠媒体查询自动添加。
比如按钮尺寸响应式，不能写 @media (max-width: 768px) { .btn--lg { padding: 0.375rem; } } 在组件样式里，而应统一在 _breakpoints.scss 中定义，并通过 @import 引入。JS 层用 clsx('btn', isMobile && 'btn--compact') 控制类名。
- ESLint 必须拦截字符串拼接类名，如
`btn--${size}@${breakpoint}`—— 这种写法绕过了状态管理，测试和调试成本极高 - 所有媒体查询必须收口到一个文件（如
src/styles/_breakpoints.scss），由设计系统统一维护 - 修饰符命名一旦定稿，就不该再因断点调整而修改；变的是
@media规则里的条件，不是类名本身
