伪类样式难维护的根本原因是交互状态与视觉样式耦合，导致逻辑分散、复用困难；应改用显式状态类（如.is-hovered）集中管理状态，配合JS事件控制，并分层使用伪类与状态类。
伪类样式难维护的根本原因
不是伪类本身有问题，而是把交互状态（如 :hover、:focus、:disabled）和视觉样式耦合在同一个选择器里，导致逻辑分散、复用困难、测试不可控。比如 .btn:hover { color: blue; } 看似简单，但当按钮需要支持键盘焦点、高对比度模式、禁用态叠加 hover 时，规则会指数级膨胀。
用显式状态类替代伪类的实操方式
核心是把“当前处于什么状态”从浏览器自动推导，变成开发者主动声明 —— 用 class 显式标记状态，再用普通类选择器写样式。这样所有状态逻辑集中可控，也方便自动化测试和无障碍属性同步。
- 把
:hover替换为.is-hovered，由 JS 在mouseenter/mouseleave中切换 - 把
:focus替换为.is-focused，配合focusin/focusout事件管理 - 把
:disabled替换为.is-disabled，并确保同时设置disabled属性和该 class - 多个状态可组合：如
.btn.is-hovered.is-disabled，CSS 中直接写对应组合规则
.btn.is-hovered { color: #0066cc; }
.btn.is-focused { outline: 2px solid #007bff; }
.btn.is-disabled { opacity: 0.5; pointer-events: none; }
.btn.is-hovered.is-disabled { color: #6c757d; }
保留必要伪类，但限制使用范围
完全弃用伪类不现实，关键在于「分层」：只在基础交互层用伪类（如默认悬停反馈），在业务组件层统一用状态类。这样既保留原生体验，又不让伪类污染组件样式契约。
-
:hover可保留在原子级元素（如a、button）的重置样式中，但禁止出现在.card、.modal这类语义化组件里 -
:focus-visible应作为默认焦点样式兜底，避免覆盖.is-focused的精细控制 - 永远不要用
:not(:disabled):hover这类嵌套伪类组合，它会让状态判断逻辑隐式化、难以调试
配套工具链降低迁移成本
手动加状态类容易遗漏，建议用轻量方案辅助：
立即学习“前端免费学习笔记（深入）”；
- 用
data-state属性代替 class（如data-state="hover"），配合 CSS 属性选择器，避免 class 名冲突 - 在 React/Vue 中封装
useHover、useFocusHook，自动绑定事件并更新状态类 - 用 PostCSS 插件（如
postcss-pseudo-classes）将伪类写法编译成状态类，渐进迁移 - 在 Storybook 中为每个组件提供
isHovered、isDisabled等控制开关，强制暴露所有状态变体
:active 样式在三个不同组件里重复出现且含义不一致，问题就不是怎么写 CSS，而是状态定义权该交给谁。 
