BEM修饰符应表达状态意图而非断点，如card--layout-stack；断点逻辑统一用min-width媒体查询控制，数值收口至变量，禁止硬编码或在类名中嵌入@media无效语法。
为什么不能把断点值写进BEM修饰符名里
浏览器根本不识别 card--stacked@md 或 nav--fixed-on-mobile 这类名字里的 @md、on-mobile ——它们只是字符串，不会触发任何媒体查询行为。真正起作用的永远是 @media 规则本身。
常见后果包括：
- 重构时要全局搜索替换
@sm/@lg，一漏就错 - 不同组件对“medium”理解不一致：有的指
768px，有的指840px - 新增折叠面板时，冒出
panel--collapsed@md--dark@lg这种命名爆炸式组合，无法维护
修饰符该用什么语义命名才合理
BEM 修饰符只表达「状态意图」，不是设备或断点本身。比如 card--layout-stack 表达堆叠意图，nav--mobile-active 表达移动端激活状态，但不承诺它只在手机上生效。
正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
--narrow、--compact、--flush这类描述布局密度或视觉关系的词，而非--mobile、--desktop - 所有断点数值必须收口到统一变量（如
$bp-md: 768px），禁止硬编码在类名或 CSS 中 - JS 监听
matchMedia后，显式添加/移除修饰符类名，比如element.classList.toggle('nav--mobile-active', matches)
@media 规则怎么写才不容易冲突
混用 max-width 和 min-width 断点极易引发覆盖冲突。例如同时存在 @media (max-width: 768px) 和 @media (min-width: 768px)，在精确 768px 宽度下两者都匹配，最终生效的是源码顺序靠后的规则——这完全不可控。
推荐做法：
- 全项目统一用
min-width，断点设为768px、992px、1200px这类逻辑宽度 -
@media块统一放在 CSS 文件末尾，包裹所有断点相关的修饰符声明 - 确保
<meta name="viewport" content="width=device-width, initial-scale=1.0">已声明，否则移动端永远按桌面宽度渲染 - 禁止在
@media条件中使用 CSS 变量：@media (min-width: var(--bp-md))是无效语法
grid-template-areas 这类布局声明要不要塞进类名
不要。把 "header main sidebar" 塞进类名如 .layout--header-main-sidebar，等于把样式逻辑硬编码进 HTML，失去维护弹性。
正确方式是让类名稳定，只靠媒体查询改声明：
- HTML 中始终用
<div class="dashboard"><div class="dashboard__sidebar"></div></div> - CSS 中
.dashboard { display: grid; }，然后在@media块里分别写：@media (max-width: 768px) { .dashboard { grid-template-areas: "header" "main" "sidebar"; } } - 调试时搜
dashboard__sidebar就能定位所有相关样式和模板
最常被忽略的一点是：修饰符本身不决定“何时切换”，只定义“当前处于什么布局意图”；而 @media 才是唯一控制“何时”的地方。把这两者职责搞混，后续维护成本会指数级上升。
