Зачем скрывать элемент не используя display: none

Скрытие элемента без display: none может быть полезно для доступности (скринридеры игнорируют display: none), анимаций или сохранения места в потоке документа. Альтернативы:

1. visibility: hidden – элемент невидим, но занимает место:

.hidden {
  visibility: hidden;
}

2. opacity: 0 – элемент прозрачный, но реагирует на события:

.transparent {
  opacity: 0;
  pointer-events: none; /* если нужно отключить взаимодействие */
}

3. position + clip – для скринридеров:

.offscreen {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

4. transform – выносит за пределы видимости:

.off-screen {
  transform: translateX(-9999px);
}