bem修饰符是显式声明响应式状态的语义化接口，需绑定组件自身、命名语义化、正交叠加，并确保所有相关样式显式依赖该修饰符前缀。
因为 BEM 修饰符把“响应式状态”从隐式推导变成显式开关，让 CSS 规则可预测、可复用、可测试。
修饰符不是媒体查询的替代品，而是它的语义化接口
很多人误以为写了 @media (max-width: 768px) 就自动适配了，其实浏览器不会主动给元素加 nav__list--mobile —— 这个类必须由 JS 或服务端显式添加。BEM 修饰符在这里承担的是「状态信标」角色：它不决定何时切换，但明确定义了“当前处于移动布局意图”这一事实。
- 错误做法：
.nav__list { display: flex; }+@media (max-width: 768px) { .nav__list { flex-direction: column; } }—— 所有规则挤在同一个选择器下，改桌面 padding 可能意外影响移动端高度计算 - 正确做法：默认
<nav class="nav__list"></nav>，JS 监听matchMedia('(max-width: 768px)')，匹配时加nav__list--mobile，CSS 写成.nav__list--mobile { flex-direction: column; } - 优势：修改
.nav__list--mobile样式时，不影响任何其他状态；测试也只需 mock 类名，无需模拟 viewport 宽度
为什么修饰符要绑定到组件自身，而不是子元素
像 .sidebar__item--collapsed 这种写法，本质是把布局控制权下放给了每个子项，结果就是断点逻辑分散、无法批量收放、样式耦合严重。
- 真实场景中，“侧边栏缩写”是整个
.sidebar的状态，不是某个.sidebar__item自己的状态 - 应该只定义
.sidebar--collapsed，再用后代选择器约束内部：.sidebar--collapsed .sidebar__logo、.sidebar--collapsed .sidebar__item - 这样切换只需操作一个类名，动画、过渡、无障碍属性（如
aria-expanded）也能集中管理 - 若子元素硬加修饰符，后续想加“夜间模式”或“紧凑模式”，就得组合出
.sidebar__item--collapsed--dark--compact，命名爆炸且不可维护
修饰符命名必须语义化，不能暴露断点值或实现细节
card--size-large@sm 或 header--is-fixed-on-mobile-and-tablet-but-not-desktop 这类名字，看似精确，实则把 CSS 逻辑锁死在特定设备假设里，一旦设计调整断点或新增设备类型，就得全量重命名。
- 修饰符应描述“它是什么”，而不是“它在哪显示”或“怎么实现” —— 所以用
card--layout-stack，不用card--stack-on-mobile - 真正响应式逻辑仍写在
@media规则里，修饰符只是视觉钩子；例如：@media (max-width: 768px) { .card--layout-stack { display: block; } } - 多个修饰符可正交叠加：
card--layout-stack card--theme-dark，互不干扰，也不依赖顺序 - 避免含
@sm、max-width、is-、on-等前缀或连接词，它们暗示实现而非意图
最常被忽略的一点是：修饰符本身不带行为，它只是 CSS 层叠链上的一个可控支点。你得确保所有依赖该状态的样式都显式带上父级修饰符前缀，否则在布局切换后，.nav__item--active 这类通用规则很容易被更高权重的选择器覆盖掉 —— 而不是 JS 没设对类名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
