:hover伪类不应与BEM修饰符耦合，因二者语义不同：修饰符表达静态变体（如--primary、--small），而:hover是运行时交互状态；应由基础类统一定义:hover行为，例外情况用.btn--disabled:hover显式覆盖。
伪类:hover不该和BEM修饰符耦合写死
直接写 .btn--primary:hover 看似直观，但会把交互逻辑和视觉变体绑死——一旦 --primary 要复用于 .link 或 .tag，hover 效果就得重复定义，违背 DRY。BEM 的修饰符本意是「静态外观变量」，而 :hover 是运行时状态，二者语义层级不同。
- 修饰符只管颜色、圆角、尺寸等可预测的静态样式，比如
--primary对应品牌色、--small对应紧凑尺寸 -
:hover行为应由基础类统一接管，如所有.btn:hover统一加transform: translateY(-1px)和过渡 - 真有例外（比如禁用态按钮必须取消 hover），用
.btn--disabled:hover显式覆盖，但这是补丁，不是默认模式
修饰符需要差异化 hover 时，优先用属性选择器或顶层 class 控制
当暗色模式下 .btn--primary 的 hover 颜色要变浅，别写 [data-theme="dark"] .btn--primary:hover 这种嵌套——它破坏了 BEM 元素的独立性，也增加 CSS 匹配开销。更干净的做法是让修饰符本身带上下文感知能力。
- 把主题感知提前到 class 层：渲染时根据
data-theme动态加.btn--primary--dark-hover这类复合修饰符（注意仍是单层 BEM） - 或改用属性选择器控制：定义
.btn--primary[data-theme="dark"]:hover，不新增类名，也不依赖祖先 - 避免
.theme-dark .btn--primary:hover这种后代选择器，它等于绕过 BEM 隔离，且易被其他.theme-dark影响
JS 操作 hover 相关类名时，别直接操作修饰符
常见错误是用 JS 主动加 btn--primary-hover 类来模拟 hover 效果，结果既要监听 mouseenter 又要防抖、还要兼容触摸设备。这完全背离了 CSS 伪类的设计初衷。
- CSS
:hover原生支持指针设备检测，且自动处理触摸延迟（iOS Safari 的 300ms 问题已基本解决） - 若需 JS 触发 hover 效果（比如键盘焦点时视觉同步），用
element.classList.add("btn--focus-visible")，再写.btn--focus-visible:hover或单独定义.btn--focus-visible样式 - 禁止在 JS 中拼接修饰符字符串，如
el.classList.add(`${block}__${elem}--${state}-hover`)—— 类名结构一旦调整，JS 就崩
真正难的是状态组合：一个按钮同时是 --primary、--disabled、又处于 :hover，浏览器按层叠顺序应用规则，但人容易漏掉 --disabled:hover 的显式重置。这种地方必须靠自动化工具（如 PostCSS 插件）做修饰符冲突检查，纯靠手写极易出错。
立即学习“前端免费学习笔记（深入）”；
