bem修饰符类名中禁止使用@md、--mobile等断点标识，因其非css语法且无效；响应式必须通过@media规则控制，修饰符仅表达状态，断点需统一收口并配合viewport meta。
不能在 BEM 修饰符类名里写 @md、--mobile 或 --sm 这类断点标识——浏览器根本不识别，CSS 也不支持，纯属无效字符串。
为什么 block--hidden@md 这种写法完全没用
类名只是选择器字符串，@md 不是 CSS 语法，不会触发任何媒体查询行为。真正起作用的是 @media 规则本身，而不是类名里的“注释”。常见错误现象包括：
- 写了
header--fixed@sm却发现小屏下没固定——因为没配对应的@media (max-width: 599px)规则 - 多个组件都用
--hidden@lg，但各处@media写法不一致（有的用min-width，有的用max-width），导致行为错乱 - 重构时想统一改断点值，结果要满项目搜
@sm、@lg，根本没法批量替换
@media 必须包裹整个 BEM 块的规则集
修饰符只表达状态（如 nav-menu--hidden-below-md），不决定何时生效；生效条件必须由外部 @media 控制。关键在于把修饰符当钩子，再用媒体查询限定作用范围：
- 所有断点变量统一收口到
_breakpoints.scss，例如$bp-md: 768px，禁止硬编码 - 推荐全项目统一用
min-width，断点设为768px、992px、1200px这类逻辑宽度 -
@media块必须包裹整个块级规则，不能只包单个属性；例如：@include media-down($bp-md) {<br> .nav-menu { display: none; }<br> .nav-menu__trigger { display: block; }<br>} - 避免混用
max-width和min-width：在精确 768px 宽度下，@media (max-width: 768px)和@media (min-width: 768px)都会匹配，最终生效的是源码顺序靠后的规则
React + CSS Modules 场景下的典型陷阱
JS 层不该动态拼接断点类名，也不该让每个组件自己管自己的响应式逻辑：
- 禁止字符串拼接类名：
className={`card card--${breakpoint}`}❌ - 禁止硬编码修饰符：
className="button button--primary button--mobile"❌ - 正确做法是用状态控制语义化修饰符：
className={clsx('card', isStacked && 'card--stacked')}✅ - 监听
matchMedia切换类名，例如：element.classList.toggle('nav--mobile-active', matches) - ESLint 必须启用自定义规则拦截
button--${size}@${breakpoint}类写法
最容易被忽略的一点：没有 <meta name="viewport" content="width=device-width, initial-scale=1.0">，移动端永远按桌面宽度渲染，@media 形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
