移动端响应式不能靠bem修饰符自动响应屏幕尺寸，必须由js主动切换类名并配合媒体查询；修饰符应表达布局意图（如--layout-stack）而非设备类型（如--mobile），以提升可维护性与跨端一致性。
移动端响应式不能靠 BEM 修饰符自动响应屏幕尺寸——nav__list--mobile 这类类名本身不带任何媒体查询逻辑，它只是个 CSS 钩子；真正起作用的是你是否在 @media 规则里写了对应样式，以及 JS 是否在合适时机把该类加到 DOM 上。
修饰符必须表达布局意图，而非设备或断点
写 card--layout-stack 比 card--mobile 更可靠。前者明确表示“这个卡片当前采用堆叠布局”，无论它出现在手机、折叠屏还是桌面端调试器的模拟窄屏中，语义都成立；后者却隐含了“只在手机上生效”的假设，一旦设计师要求“平板横屏也堆叠”，你就得改类名、改 CSS、改 JS 绑定逻辑，三处同步出错风险高。
常见错误现象：grid--mobile-2col 这种命名既无法被 JS 安全切换（含义模糊），也无法被媒体查询复用（断点值硬编码进类名）。
-
grid--narrow表达内容密度需求，@media (max-width: 768px)控制它何时生效 -
button--size-sm描述尺寸意图，不指定在哪一屏出现 - 禁用
@sm、--tablet-only等直接暴露断点的写法
响应式状态必须由 JS 主动切换修饰符类
媒体查询不会自动给元素加类。@media (max-width: 768px) { .nav__list--mobile { flex-direction: column; } } 写得再对，如果 HTML 里 <ul class="nav__list"></ul> 始终没变成 <ul class="nav__list nav__list--mobile"></ul>，样式就永远不会触发。
正确做法是用 window.matchMedia 监听并首次加载即检查：
const mql = window.matchMedia('(max-width: 768px)');
const navList = document.querySelector('.nav__list');
<p>const updateMobileClass = () => {
if (mql.matches) {
navList.classList.add('nav<strong>list--mobile');
} else {
navList.classList.remove('nav</strong>list--mobile');
}
};</p><p>// 首次加载必须调用，避免闪屏
updateMobileClass();
mql.addEventListener('change', updateMobileClass);
</p>
- 别依赖
:is()或容器查询（@container），SSR 输出的 DOM 几乎都不支持 - 监听函数必须在页面渲染后立即执行一次，否则首屏可能漏掉类名
- 多个断点需独立
matchMedia实例，不要合并成一个复杂条件
多状态叠加时，CSS 必须显式带父级前缀
当导航同时处于移动端布局和某项激活状态，HTML 可能是 <ul class="nav__list nav__list--mobile"><li class="nav__item nav__item--active"></ul>。但如果你只写了 .nav__item--active { background: #007bff; }，在 --mobile 下很可能被覆盖或失效——因为未限定上下文，选择器权重或层叠顺序容易失控。
正确写法必须带上块级前缀：
.nav__item--active { /* 默认态，基础样式 */ }
.nav__list--mobile .nav__item--active { /* 移动端下激活态的特定表现 */ }
- 禁止省略块名写
.nav__item--active单独生效，它应始终依附于块的语义边界 - 交互类（如
--expanded）和布局类（如--mobile）可共存，但不能混用生命周期：前者由 click 触发，后者由视口变化驱动 - 轮播指示器必须严格用
carousel__indicator--active，不能简写为carousel-indicator--active，否则构建工具会报错，事件委托也会失效
最常被忽略的一点是：修饰符不是“开关”，而是“语义锚点”——它让开发者一眼看懂组件当前处于什么意图状态，而不是靠猜 CSS 文件里哪条 @media 正在生效。一旦你开始把断点逻辑塞进类名，维护成本就会指数级上升，尤其在跨端调试 iOS Safari 的伪类失效或 DPR 缩放异常时，清晰的语义边界就是最后一道防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
