BEM修饰符不应命名为--mobile或--desktop，因其表达的是布局变体而非设备环境；正确做法是用语义化命名（如--narrow、--compact）并由媒体查询统一控制生效条件。
响应式修饰符为什么不能叫 --mobile 或 --desktop
这类名字直接绑定设备类型，但 BEM 修饰符要表达的是「状态」或「变体」，不是渲染环境。写成 .grid--mobile 会导致：JS 切换类时语义错乱（比如在桌面端手动加 --mobile 却期望它生效）、媒体查询逻辑和类名耦合、后续增加平板断点时变成 --mobile-tablet 这种不可枚举的值。
真正该做的，是把断点逻辑收口在 CSS 文件末尾的媒体查询块里，修饰符只保留语义清晰、可预测的值：
-
.grid--narrow对应小屏内容密度需求，CSS 中用@media (max-width: 768px)控制 -
.grid--dense表达紧凑排列意图，不指定在哪一屏生效，由媒体查询统一接管 - 禁止出现
.grid--mobile-2col这类混合描述，它既不是原子值，也无法被 JS 安全切换
grid-template-areas 的值要不要进 BEM 类名
不要。BEM 类名负责语义归属，grid-template-areas 是布局声明，属于 CSS 规则体内部的配置项。把 "header main sidebar" 塞进类名如 .layout--header-main-sidebar，等于把样式逻辑硬编码进 HTML，失去维护弹性。
正确做法是让类名保持稳定，只靠媒体查询改 grid-template-areas：
立即学习“前端免费学习笔记（深入）”；
- 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就能定位所有相关样式和模板
如何让不同断点共用同一套修饰符逻辑
关键不是“复用类名”，而是复用修饰符的语义定义。比如 .card-grid--compact 在桌面端控制 gap: 0.5rem，在移动端媒体查询里可以把它覆盖为 gap: 0.25rem，而不是另起一个 --compact-mobile。
实操要点：
- 所有修饰符规则必须写在基础 Block 类之后，确保层叠顺序可控
- 媒体查询块统一放在文件末尾，包裹所有断点相关的修饰符声明
- 避免在修饰符里写
display: none这类强干预行为；隐藏应由父容器状态类（如.is-sidebar-closed）驱动，而非--hidden这种通用修饰符 - 如果某修饰符只应在特定断点生效（比如
--flush只用于移动端卡片边距归零），就在媒体查询里单独声明，不污染默认样式流
为什么 .grid__item--sm 是错的，而 .grid--sm .grid__item 才对
因为尺寸是网格容器的整体特征，不是单个子项的状态。.grid__item--sm 暗示这个 item 自身有“小尺寸”属性，但实际它只是被容器约束出来的视觉结果。一旦你把同一个 .grid__item 拿去另一个网格里，--sm 就失效或冲突。
正确结构把修饰符挂在 Block 上，子元素通过上下文继承行为：
-
.grid--sm设置grid-gap: 0.5rem、font-size: 0.875rem等整体缩放规则 -
.grid__item只定义自身最小样式（如min-width: 0防止 flex/gap 溢出），不带尺寸修饰 - 需要响应式微调时，在媒体查询中重置
.grid--sm的 gap 值，而不是给每个__item加一堆断点修饰符
最易被忽略的一点：Grid 容器的修饰符一旦挂上，就该对所有子元素生效——如果你发现某个 __item 总得单独加类来“矫正”，说明 Block 的修饰符定义本身没覆盖到真实场景，该回退检查语义是否准确。
