不能。伪类如:hover是瞬时交互状态，应原生使用；bem修饰符如--disabled仅表达js可控、持久的静态状态，二者语义与用途严格分离，不可混用命名（如.btn--hover），但可共存于同一选择器以实现覆盖逻辑。
伪类选择器和BEM修饰符能直接混用吗？
不能。BEM 的 modifier 是一个静态类名（比如 btn--disabled），而伪类（如 :hover、:focus）是动态状态，浏览器不认为 .btn--disabled:hover 是“BEM 合法修饰符组合”——它只是个普通 CSS 选择器，BEM 规范本身不定义状态逻辑。
但你可以安全地把它们一起用，前提是明确谁负责什么：
-
modifier控制组件的预设变体（如主题、尺寸、禁用态） - 伪类控制用户交互或 DOM 状态（如悬停、聚焦、选中）
- 二者共存时，优先级由具体选择器权重决定，不是 BEM 决定的
怎么写才不破坏 BEM 结构又避免冗余类？
关键在「状态是否需要被 JS 控制或跨组件复用」。如果只是视觉反馈，优先用伪类；如果状态需持久化、可测试、或影响布局逻辑，就用 modifier。
例如按钮禁用态：
- ✅ 推荐：
<button class="btn btn--primary btn--disabled"></button>+ CSS 中.btn--disabled { pointer-events: none; opacity: 0.5; } - ⚠️ 慎用：
.btn--primary:disabled—— 它只匹配原生disabled属性，对自定义禁用（如通过 JS 切换data-disabled）无效 - ❌ 避免：
.btn--primary:hover.btn--disabled—— 这种组合既难维护，又容易因权重问题被覆盖
:focus-visible 和 BEM 修饰符怎么配合？
:focus-visible 是现代焦点提示的推荐方案，但它不能替代 --focused 这类 modifier，因为：
-
:focus-visible受用户输入方式影响（鼠标点击时不触发），而--focused是确定性状态 - 若组件需统一高亮逻辑（比如配合键盘导航菜单展开），必须用 JS 切换
item--focused类 - 可以共存：用
:focus-visible做默认焦点样式，再用.item--focused:focus-visible覆盖特殊场景
示例：
.input {
border: 1px solid #ccc;
}
.input:focus-visible {
outline: 2px solid #007bff;
}
.input--error:focus-visible {
outline-color: #dc3545;
}
BEM 修饰符命名遇上伪类，哪些坑最常踩？
最典型的混淆是把伪类语义硬塞进 modifier 名里，比如 btn--hover 或 card--active（却没配 JS 切换）。这会导致：
- 类名失去可预测性：开发者无法判断它是静态配置还是动态状态
- 样式泄漏：
.btn--hover在非 hover 场景下也可能被意外激活 - SSR/CSR 不一致：服务端渲染时没有 hover 状态，类名存在但样式不生效
真正该做的，是让 modifier 表达「意图」而非「时机」——btn--emphasized 可以在 hover 时加，也可以在页面加载后由 JS 加，语义稳定，样式可控。
复杂点在于状态叠加：一个元素同时有 --disabled、--loading、--success，此时伪类（如 :hover）是否还应生效？答案取决于设计规范，而不是技术能不能写——得提前约定，别等压测时发现禁用按钮 hover 还有阴影。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
