响应式修饰符类名不能含断点标识，必须用语义化命名（如card--hidden-below-md）并由统一_breakpoints.scss中的@media控制生效；禁止组件内硬写媒体查询，断点值须集中管理、严格对齐变量。
修饰符类名不能包含断点标识
写 .card--hidden@md 或 .nav--mobile 是无效的——浏览器只把它们当普通字符串匹配，不会触发任何媒体查询逻辑。这类命名看似省事，实则让响应式行为完全失控：HTML 里加了类，样式却不生效；团队成员各自定义 @sm 含义，后期改断点值时满项目搜又漏改；PurgeCSS 还可能因识别不到合法类名而误删。
真正起作用的是 CSS 规则的生效条件，不是类名里的文字。修饰符只负责表达「意图」，比如 card--hidden-below-md 表示“这个卡片应在中屏以下隐藏”，具体什么时候隐藏，由外部 @media 控制。
媒体查询必须统一收口到_breakpoints.scss
所有断点数值（如 $bp-md: 768px）和对应 @media 块，必须集中定义在项目级的 _breakpoints.scss 文件里，禁止在组件文件中硬写 @media (max-width: 767px)。
- 避免多处定义导致断点值不一致（一处写
767px，另一处写768px） - 方便全局调控：改一个变量，全站响应式逻辑同步更新
- 支持工具链校验，比如 Stylelint 可检查是否所有
--below-md都配对了对应媒体查询
组件样式文件里只写修饰符规则，例如：
.card--hidden-below-md { display: none; }，然后在 _breakpoints.scss 末尾统一包裹：
@media (max-width: 767px) {
.card--hidden-below-md {
display: none;
}
}
修饰符命名要动词+范围，且与变量对齐
类名必须让人一眼看懂适用边界，不能靠猜。缩写如 sm、lg 必须有团队共识，且严格对应 Sass 变量定义。
- ✅
card--stacked-above-lg：明确表示“从大屏起堆叠布局”，且$bp-lg在_breakpoints.scss中已定义为1024px - ✅
nav-menu--collapsed-below-md：动词collapsed+ 范围below-md，语义完整 - ❌
card--sm：是尺寸？断点？哪个值？无法推断 - ❌
nav--mobile-only：“only” 暗示排他性，但 CSS 无法自动清除其他断点下的样式，容易引发误解
多个断点状态不要塞进一个修饰符
遇到“移动端隐藏、平板显示、桌面又隐藏”这种需求，别写 card--hidden-mobile-desktop。这种命名掩盖了真实样式依赖关系，也丧失组合能力。
正确做法是拆成独立修饰符，在 CSS 中分层覆盖：
.card--hidden-below-md {}
.card--hidden-above-lg {}
@media (max-width: 767px) {
.card--hidden-below-md { display: none; }
}
@media (min-width: 1024px) {
.card--hidden-above-lg { display: none; }
}
HTML 中按需组合：<div class="card card--hidden-below-md card--hidden-above-lg">。这样每个修饰符职责单一，可读、可测、可复用。
<p>最容易被忽略的是：媒体查询不是修饰符的装饰，而是它的执行开关；一旦把断点逻辑揉进类名，就等于放弃了 BEM 的契约能力——类名不再能被工具链识别、不再能被类型系统推导、也不再能被团队无歧义地理解。</p>
</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
