Как убрать лишние классы

Часто в компонентах есть контейнеры для описания, ошибки, подсказки или дополнительного контента.

Если данных нет — элемент остаётся пустым, но продолжает занимать место.

Обычно это решают через JS или условный рендеринг.

.error {
  display: none;
}

А потом отдельно добавляют класс при появлении контента.

Но CSS умеет определять пустые элементы самостоятельно.

.error:empty {
  display: none;
}

Теперь блок автоматически скрывается, если внутри ничего нет.

Можно делать и обратную логику.

.card:not(:empty) {
  padding: 16px;
}

Отступы появятся только тогда, когда внутри действительно есть контент.

Особенно удобно для:

error,
hint,
description,
badge

Где содержимое может появляться динамически.

:empty позволяет убрать лишние классы и часть условной логики прямо средствами CSS.