BEM修饰符不应命名为--mobile或--desktop，因其混淆设备环境与组件语义变体；正确做法是用--narrow、--stack等表达意图，并由媒体查询统一控制生效。
不建议在 BEM 修饰符中体现屏幕尺寸——这是常见误解的源头。
为什么 --mobile、--desktop 这类修饰符名是错的
它们把渲染环境（设备或视口）和组件状态混为一谈。BEM 修饰符该表达的是「这个组件在此上下文下的语义变体」，比如布局密度、交互方式、主题模式，而不是“它正显示在什么设备上”。
常见错误现象包括：
-
.card--mobile被 JS 手动加到桌面端 DOM 上，结果样式意外生效，调试时找不到触发源 - 新增平板断点后，不得不补
--tablet，再加折叠屏又来--foldable，修饰符爆炸且无法枚举 - 媒体查询逻辑和类名强耦合，比如
@media (max-width: 768px) { .card--mobile { ... } }，一旦断点值调整，CSS 和 HTML 类名就得同步改
真正该用什么代替 --mobile
用语义化、可组合、与断点解耦的修饰符，比如 --narrow、--stack、--touch。它们本身不绑定任何尺寸，只声明意图：
立即学习“前端免费学习笔记（深入）”；
-
.card--narrow表示“内容密度更高”，由@media (max-width: 768px)控制是否生效 -
.nav__list--stack表示“垂直堆叠布局”，可在小屏和高对比度模式下复用 -
.button--touch表示“适配触控操作”，影响 padding 和点击区域，与屏幕宽窄无关
所有断点逻辑统一收口在 CSS 文件末尾的媒体查询块里，修饰符只负责承载语义。
JS 切换修饰符时最容易踩的坑
响应式状态不会自动注入 DOM，必须靠 window.matchMedia 主动监听并操作 classList：
- 首次加载必须手动检查一次，否则 SSR 渲染后出现闪屏
- 别用
element.classList.toggle('xxx', matches)，因为toggle在 false 时会移除类，但某些场景需要保留其他修饰符（如--dark） - 避免在修饰符名里塞逻辑，比如
--mobile-2col—— 它既不是原子值，也无法被安全叠加或剔除
一个导航可能同时有 nav__list--stack（响应式布局）和 nav__list--expanded（用户交互），两者生命周期不同，但可以共存。
最常被忽略的一点：修饰符不是媒体查询的替代品，而是它的语义代理。写错名字，后面所有 JS 切换、主题适配、微前端样式隔离都会跟着错。**类名一旦污染，就很难从组件树里干净剥离。**
