Кроме `:hover`, какие состояния интерактивных элементов стоит стилизовать и почему?

Question

Accepted Answer

## Суть
Пользователи взаимодействуют не только мышью. Стили состояний дают обратную связь и доступность.

## Важные состояния

- `:focus` / `:focus-visible` — клавиатура и вспомогательные технологии.
- `:active` — нажатие.
- `:visited` — для ссылок (осторожно с приватностью).
- `:disabled` / `[aria-disabled]` — недоступность действия.
- `:checked` / `[aria-pressed]` / `[aria-expanded]` — состояние контрола.
- Ошибки валидации — `:invalid` / кастомные классы.

```css
button:focus-visible {
  outline: 2px solid #066;
  outline-offset: 2px;
}
button:disabled {
  opacity: 0.6;
}
```

Почему важно: без `:focus` клавиатурный пользователь «теряет» курсор; без disabled-стилей непонятно, почему клик не работает.

## Итог
Стилизуйте hover **и** focus/active/disabled/состояния. Особенно критичен видимый фокус.