Как убрать лишние классы для пустых блоков?

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

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

Обычно это решают через JS или условный рендеринг.
.error {
display: none;
}

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

Но CSS умеет определять пустые элементы самостоятельно.
.error:empty {
display: none;
}

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

Можно делать и обратную логику.
.card:not(:empty) {
padding: 16px;
}

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

Особенно удобно для:
error,
hint,
description,
badge

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

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

Code Ready | #совет