BEM媒体查询应只启用修饰符而非重写样式，如用.card__title--compact配合@media控制，避免分散样式、语义模糊和DOM依赖；所有修饰符须独立可测，打印/高对比度等需专用媒体查询兜底。
媒体查询里别直接改 BEM 元素选择器
直接在 @media 块里写 .card__title { font-size: 1.2rem; } 看似省事，实则埋雷。BEM 的核心是「块级作用域隔离」，而这种写法把样式逻辑从 card__title 这个类本身剥离出去，导致：
- 同一个元素在不同断点下的样式分散在多处，无法一眼看清完整行为
- 修改字体大小时得同时查 card__title 默认样式 + 所有 @media 中的覆盖规则
- 工具（如 stylelint、CSS-in-JS 提取）无法识别该类的完整响应式语义
正确做法是让所有视觉表现都收口到类名本身，@media 只负责「启用/禁用」某个修饰符，不负责「重写」元素样式。
用修饰符承接响应式意图，而非硬编码值
修饰符不是“移动端标题变小”，而是“标题进入紧凑模式”。它表达的是组件状态意图，不是设备或像素条件：
-
card__title--compact✅ 表达意图，可复用于打印、窄栏、折叠面板等场景 -
card__title--sm❌ “sm” 指尺寸？断点？语义模糊，团队理解不一致 -
card__title@mobile❌ 类名含@无效，浏览器当普通字符串，且违反 BEM 语法
然后在 CSS 中用媒体查询控制该修饰符何时生效：
@media (max-width: 768px) {
.card__title--compact {
font-size: 1.1rem;
line-height: 1.3;
}
}HTML 保持干净：<h3 class="card__title card__title--compact"> —— 语义明确，JS 也可安全增删。
立即学习“前端免费学习笔记（深入）”；
避免在媒体查询中嵌套复杂选择器
常见错误是把结构依赖塞进 @media，比如：
@media (min-width: 992px) {
.card .card__header .card__title { /* ... */ }
}这违背了 BEM「扁平选择器」原则，也放大了维护成本。应始终只用单个类名作为样式入口：
- ✅
.card__title--large在桌面端生效 →@media (min-width: 992px) { .card__title--large { ... } } - ❌
.card--desktop .card__title→ 引入隐式父子依赖，重构 DOM 即失效 - ❌
.card__title:hover写在媒体查询里 → 伪类应与基础类共存，不随断点切换
所有修饰符必须能独立存在、独立测试，不依赖上下文选择器。
打印和高对比度等特殊媒体类型要单独处理
@media print 或 @media (prefers-contrast: high) 不是“另一个屏幕尺寸”，而是完全不同的渲染环境。不能指望 card__title--compact 在打印时也适用：
- 打印时通常需重置字体单位（
pt）、禁用背景色、展开折叠内容 - 高对比度模式下，
color和background-color可能被系统强制替换，需用forced-colors媒体查询兜底 - 不要新增
card__title--print类 —— 它只在一种媒体类型下有意义，污染组件语义
正确方式是在对应媒体查询中，直接重写已有修饰符的表现：
@media print {
.card__title--compact {
font-size: 12pt !important;
color: #000 !important;
}
}最易被忽略的是：很多构建工具（尤其 CSS-in-JS）默认不注入 @media print 规则，上线前务必检查最终 HTML 中的 <style> 是否真包含这些规则。
