BEM修饰符不能包含断点标识（如@sm、--mobile），因其混淆状态意图与生效条件；应使用语义化修饰符（如card--layout-stack）配合统一管理的@media规则和集中定义的断点变量。
断点样式不能塞进BEM修饰符名里，比如 card--hidden@md 或 nav--mobile 这类写法根本不会触发响应行为——浏览器只当它是普通字符串，@md 不是语法，也不被解析为媒体查询条件。
为什么修饰符里不能带断点标识（如 @sm、--mobile）
这类命名混淆了「状态意图」和「生效条件」两个职责。BEM修饰符只该回答“组件现在是什么状态”，不该回答“在什么屏幕下才这样”。一旦把断点值硬编码进类名：
-
card--stacked@sm改成@md时，你得同步改 HTML、JS 切换逻辑、CSS 文件里的@media块，漏一处就失效 - 不同人对
sm理解不一致：有人指 640px，有人按 768px，团队协作时互相覆盖样式却查不出原因 - PurgeCSS 等工具识别不到真实生效的类，可能误删
card--stacked@sm，因为它的选择器从未在 CSS 中显式声明过
正确做法：语义化修饰符 + 外部 @media 包裹
修饰符只表达意图，比如 card--layout-stack 表示“当前采用堆叠布局”，而“这个布局何时生效”交给统一的 @media 控制：
@media (max-width: 767px) {
.card--layout-stack {
flex-direction: column;
}
}所有断点数值必须集中定义在项目级的 _breakpoints.scss 中，例如：
立即学习“前端免费学习笔记（深入）”；
$bp-md: 768px;
然后在 _breakpoints.scss 末尾统一包裹对应规则，确保：
- 修改
$bp-md后，所有--below-md类自动适配新阈值 - Stylelint 可校验每个
--below-md是否有配套@media (max-width: $bp-md - 1) - 组件样式文件里只写基础规则，不出现任何
@media
React 中怎么安全加/删这类修饰符
JS 层不拼接断点名，也不监听 resize，而是用状态驱动语义化开关：
const isMobileView = useMediaQuery('(max-width: 767px)');
className={clsx('card', isMobileView && 'card--layout-stack')}关键点：
- 禁止字符串拼接：
className={`card card--${size}@${breakpoint}`}❌ - 禁止硬编码设备类：
className="card card--mobile"❌ - 用
useMediaQuery（或原生window.matchMedia）首次加载即检查，避免 FOUC - 多个状态可正交叠加：
card card--layout-stack card--has-shadow，互不影响
最容易被忽略的细节
媒体查询必须统一用 min-width 或统一用 max-width，混用会导致 768px 这个边界值同时命中两个规则，最终生效的是源码顺序靠后的那条——这完全不可控。另外，<meta name="viewport" content="width=device-width, initial-scale=1.0"> 缺失的话，移动端永远按桌面宽度渲染，@media 形同虚设。
