伪类不应写进BEM类名，而应直接附加在Block或Block__Element选择器后；如.button:hover或.button__text:hover正确，.button--hover或.button__icon .button__text:hover错误，因伪类是瞬时交互反馈，非持久状态，须与Modifier严格区分。
伪类该不该写进 BEM 类名里
BEM 规范本身不禁止伪类，但明确反对把 :hover、:focus 这类状态硬编码进类名。比如写 .button--hovered 是错的——这不是组件的固有状态，而是用户交互触发的瞬时表现，CSS 原生伪类已足够表达，且更轻量、可组合、无 JS 依赖。
:hover 等伪类应该放在哪一级选择器上
必须只作用于 Block 或 Block__Element 本身，不能用于 Block--Modifier 的后代或嵌套结构。常见错误是写 .card--expanded .card__header:hover，这破坏了 BEM 的“无上下文依赖”原则，也容易因 DOM 变动失效。
- ✅ 正确：
.button:hover {}或.button__text:hover {} - ❌ 错误：
.button--primary:hover {}（Modifier 不该承载交互态） - ❌ 错误：
.button__icon .button__text:hover {}（含空格后代选择器，耦合 DOM 结构）
Modifier 和伪类的分工边界在哪
Modifier 描述的是可控、持久、语义化的状态，比如 .button--disabled、.input--error；而 :hover 是浏览器自动管理的瞬时视觉反馈，不属于组件 API 的一部分。
- 当需要覆盖伪类样式时，优先用 Modifier 控制：比如禁用状态下取消 hover 效果，写
.button--disabled:hover { opacity: 1; cursor: not-allowed; } - 不要为每个交互态都建 Modifier：
.button--hover、.button--focus这类命名既冗余又不可维护 - 若需 JS 主动控制 hover 行为（如模拟悬停），应通过添加临时 class（如
.is-hovered）实现，而非篡改 BEM 结构
SCSS 中怎么安全地写 hover 样式
在 SCSS 里用 &:hover 是安全的，前提是它出现在 Block 或 Element 的顶层嵌套中。一旦出现 &__element:hover 以外的写法，就容易越界。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全：
.button { &:hover { color: blue; } &__text { &:hover { text-decoration: underline; } } } - ❌ 危险：
.button { &--primary { &:hover { /* 这里 hover 绑定在 Modifier 上，语义错位 */ } } } - ⚠️ 注意：
&__element:hover生成的是.button__element:hover，不是后代选择器，符合 BEM 隔离要求
真实项目里最容易被忽略的一点：伪类样式不该成为组件对外暴露的“状态契约”。用户调用 <Button /> 时，不需要知道它内部 hover 是什么颜色——那是实现细节；但 disabled 属性是契约的一部分，所以对应 .button--disabled 才合理。
