Как убрать лишние классы для пустых блоков? — 24 июня 2026 г. в 19:09:03.680
Как убрать лишние классы для пустых блоков? Часто в компонентах есть контейнеры для описания, ошибки, подсказки или дополнительного контента. Если данных нет — элемент остаётся пустым, но продолжает занимать место. Обычно это решают через JS или условный рендеринг. .error { display: none; } А потом отдельно добавляют класс при появлении контента. Но CSS умеет определять пустые элементы самостоятельно. .error:empty { display: none; } Теперь блок автоматически скрывается, если внутри ничего нет. Можно делать и обратную логику. .card:not(:empty) { padding: 16px; } Отступы появятся только тогда, когда внутри действительно есть контент. Особенно удобно для: error, hint, description, badge Где содержимое может появляться динамически. :empty позволяет убрать лишние классы и часть условной логики прямо средствами CSS. Code Ready | #совет