BEM修饰符只表达组件状态，不表达断点逻辑；断点应统一管理并仅在媒体查询中定义样式，禁止将设备、断点、状态混入类名，避免语义错乱与维护困难。
不能把断点逻辑塞进 BEM 类名里，比如 card--mobile 或 grid--sm —— 这类写法会让语义错乱、维护爆炸，而且根本没法安全地和媒体查询协同工作。
修饰符只表达状态，不表达“在哪生效”
BEM 的 --xxx 修饰符本质是钩子，不是开关。它该回答“这个组件现在是什么意图状态”，而不是“它该在哪个屏幕宽度下显示”。card--stacked 表示“当前卡片采用堆叠布局”，至于这个布局是否只在小屏出现，那是 CSS 层的事。
- 写
card--stacked，然后在@media (max-width: 768px)块里定义它的样式，才是正路 - 如果硬写
card--stacked-mobile，就等于把断点值（768px）、设备类型（mobile）、状态（stacked）全揉进一个名字，改设计时三处都要动 - JS 动态加类时也必须保持语义一致：窗口缩小时加
card--stacked，不是加card--stacked-mobile—— 后者在桌面端手动加了也没意义，因为 CSS 里没配它
所有断点规则必须收口到媒体查询块里
项目里只能有一处集中管理断点的地方，比如 _breakpoints.scss，里面定义 $breakpoint-md: 768px；所有组件的响应式样式都从这里引用，且只写在文件末尾的 @media 块中。
- 禁止在
card.scss里直接写@media (max-width: 768px) { .card--stacked { … } }—— 断点逻辑会散落各处，后期调整个数值就得全局搜索 - 允许复用修饰符名，但不同断点下的样式要靠层叠顺序控制：基础样式写在前，
@media规则写在后，确保覆盖有效 - 像
.card--compact在桌面端设gap: 0.5rem，在移动端媒体查询里重写为gap: 0.25rem，比另起--compact-mobile更干净
避免用修饰符控制 display: none 或 layout 强干预
修饰符不该承担容器级的显隐或流式切换职责。比如 sidebar--hidden 是合理的（表示侧边栏当前被折叠），但 sidebar--hidden-on-mobile 就越界了——它把环境判断逻辑提前到了 HTML 层。
立即学习“前端免费学习笔记（深入）”；
- 真正该隐藏侧边栏的，是父容器的状态类，比如
.layout--sidebar-collapsed，再由媒体查询决定它何时生效 -
display: none这种强样式建议只出现在媒体查询内部，不作为修饰符的默认行为；否则 JS 切换类时容易和 CSS 冲突 - 网格模板（
grid-template-areas）这类声明绝对不要塞进类名，比如layout--header-main-sidebar—— 它属于 CSS 规则体，不是语义归属
多个修饰符共存时，叠加态必须显式声明
像 card--stacked card--loading 这样同时存在没问题，但它们的组合效果不会自动产生。浏览器只按 CSS 声明顺序和特异性应用样式，不会“理解”你想要什么视觉结果。
- 必须单独写
.card--stacked.card--loading { opacity: 0.7; }这类组合规则，否则可能加载动画被堆叠样式干扰 - 所有修饰符应控制正交维度：颜色、尺寸、状态互不重叠；如果两个修饰符都设了
background，就说明设计有问题，得砍掉一个 - PurgeCSS 等工具容易删掉 JS 动态添加的类，比如
card--loading，务必在safelist中用正则保留：/card--(stacked|loading|compact)/
最常被忽略的是：BEM 不执行任何逻辑，它只是命名契约。所谓“断点失效”，90% 是因为 HTML 没写对类名、CSS 没按层叠顺序组织、或者构建配置没兜住动态类名 —— 而不是修饰符本身不能用。
