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

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

Причины и способы

• Плавная анимация — display не анимируется, а opacity и visibility — да:

.menu { opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.menu.open { opacity: 1; visibility: visible; }

• Сохранить место в раскладке — visibility: hidden: блок не прыгает при появлении.
• Доступность — текст для скринридеров (подпись иконки-кнопки), визуально скрытый класс:

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

• Производительность — переключение display вызывает пересчёт раскладки, а opacity только композицию.
• Измерения — элементу с display: none нельзя узнать размеры.

Коротко для собеседования

Без display: none скрывают, чтобы анимировать, сохранить место, оставить текст для скринридеров или иметь возможность измерить элемент.

Подробнее: The A11Y Project — How-to: Hide content