伪类应按用户交互状态归类以降低维护成本，聚焦默认、悬停、聚焦、激活四类核心状态，避免过早使用语义化伪类；用自定义属性与状态类替代多重伪类链，借助:where()统一低权样式，并文档化状态流转逻辑。
把伪类按用户交互状态归类，能大幅降低维护成本。关键不是减少伪类数量，而是让它们的用途一目了然、修改时有迹可循。
聚焦核心交互状态
大多数 UI 组件只涉及 4 种基础状态：默认、悬停、聚焦、激活。优先围绕这四个写样式，避免过早添加 :visited、:required 等语义化或表单专属伪类，除非当前组件确实需要。
- 默认（:not(:hover):not(:focus):not(:active)）——显式写出基础样式，不依赖隐式回退
-
悬停（:hover）——仅用于鼠标设备，避免在触摸端误触发（可用
@media (hover: hover)包裹） -
聚焦（:focus）——确保键盘可访问，配合
:focus-visible做精准控制 - 激活（:active）——强调按下瞬间反馈，持续时间短，样式宜轻量
状态组合用逻辑分组，不用嵌套堆叠
避免写 button:hover:focus:active 这类多重伪类链——它既难读又难调试。改用 CSS 自定义属性 + 状态类辅助：
- 给按钮加
class="btn"，再用 JS 在对应时机添加is-hovered、is-focused等语义类 - CSS 中写
.btn.is-hovered { ... }和.btn.is-focused { ... }，清晰对应状态 - 需要组合态（如“已聚焦且悬停”）时，明确写
.btn.is-focused.is-hovered，而非依赖伪类顺序
用 :where() 或 :is() 降低选择器权重
当多个组件共享同一套状态样式（比如所有链接的 :hover 都要变色），用 :where() 统一声明，避免因权重过高导致覆盖困难：
立即学习“前端免费学习笔记（深入）”；
:where(a, button, .link):hover { color: var(--primary-hover); }:where(input, select, textarea):focus { outline: 2px solid var(--focus-ring); }- 这样后续局部调整时，只需写普通类选择器就能轻松覆盖，不用拼命加
!important
文档化状态流转逻辑
在 SCSS 文件顶部或配套 README 中，用简短注释说明该组件支持哪些状态、触发条件、是否互斥：
/* 按钮状态说明： * - 默认：无交互 * - :hover：仅鼠标悬停（非触摸） * - :focus：键盘 Tab 或 JS focus() * - :active：鼠标按下 / 触摸开始（自动移除） * - 不支持 :visited（非 a 标签） */
团队协作时，这份轻量文档比猜选择器更可靠。
