应使用:hover处理纯css交互，--hover仅用于需js控制的跨元素联动等场景；二者语义不同、不可混用，且--hover必须配合js及时清理。
Hover状态该用:hover还是--hover？
BEM规范本身不接管伪类，:hover必须保留原生写法；BEM的--hover是自定义状态修饰符，二者语义和用途完全不同，混用会导致样式失控或可维护性崩坏。
什么时候该用:hover，什么时候该加--hover？
核心判断依据是：触发条件是否由用户交互「直接驱动」且「无需JS干预」。
-
:hover用于纯CSS响应式交互：鼠标悬停时自动生效，无JS参与，浏览器原生支持，性能最优 —— 例如按钮高亮、下拉菜单展开 -
--hover仅在需要「跨元素联动」「延迟生效」「服务端预渲染状态」或「与其它状态组合（如--hover--disabled）」时使用，必须配合JS切换class，否则无效 - 常见误用：给按钮加
btn--hover却没用JS控制，结果悬停无反应；或用:hover模拟“已悬停但鼠标已移开”的过渡态，导致逻辑断裂
btn__icon:hover和btn--hover能共存吗？
可以，但必须明确分工：前者负责子元素视觉反馈（如图标旋转），后者负责组件整体状态标记（如影响父容器阴影或相邻元素）。关键约束是避免样式权重冲突。
- 优先用
:hover处理瞬时、局部、无副作用的视觉变化 -
--hover只用于需要被其他选择器感知的状态，例如：.card--hover .card__footer显示操作栏 - 若同时存在，确保
--hover的样式不覆盖:hover的动画属性（如transition），否则鼠标移出时可能卡顿 - 不要写
.btn--hover:hover—— 这既违背BEM状态语义，又让开发者无法区分是“人为标记了hover”还是“真的hover中”
React/Vue项目里怎么安全落地？
框架组件中，:hover照常写在CSS里；--hover需通过事件手动管理class，且必须防抖/节流，否则快速进出会触发大量重排。
- Vue中推荐用
@mouseenter.native/@mouseleave.native+:class="{ 'btn--hover': isHovered }" - React中避免在
onMouseEnter里直接setState({ isHovered: true })，应加requestAnimationFrame包裹，防止高频更新 - 服务端渲染（SSR）项目慎用
--hover：首屏HTML不含该class，JS注入后才出现，可能造成布局跳动；此时应优先用:hover - 无障碍（a11y）注意：
:hover对键盘焦点无效，若需支持focus等效行为，必须同步处理:focus和--focused，不能只靠--hover
--hover不是:hover的替代品，而是为了解决CSS原生伪类做不到的事。真正容易被忽略的是：很多团队加了--hover却从不清理它 —— 鼠标移出后class还留在DOM上，后续状态叠加就全乱了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
