Отлов пустых элементов на сайте 👻

Пустые элементы — это плохо

В разметке не должно быть пустых элементов.

Чаще всего пустые элементы выполняют чисто декоративную функцию. Например, при помощи пустого тега <i> добавлять иконку неправильно:

<button><i class="icon"></i> submit </button>

Когда-то давно такое написание можно было оправдать, сегодня — нет.

Правильно вставить иконку в псевдоэлемент, .icon:before, сократив вид записи:

<button class="icon"> submit </button>

Ещё остаются без контента пустые ссылки, стилизованные под кнопки.

Плохо

<a href=“fb.com”></a>

Хорошо

<a href=“fb.com”>facebook</a>

Если текст не нужен по дизайну, он всё равно должен присутствовать в разметке и его придётся скрыть средствами CSS. Это понятие доступности.

В правительстве США создан специальный сайт о доступности веб-интерфейсов. Рекомендую почитать.

Отлов пустых элементов

Чтобы отлавливать пустые элементы на этапе вёрстки, достаточно использовать небольшой фрагмент CSS

:empty:not(img):not(input) {
    visibility: hidden;
    opacity: .5;
    outline: 4px solid #4ce00e;
}

Пустой элемент станет невидимым, как и в случае использования display: none, но соседние элементы не будут смещаться. Тем более, элементам часто переназначается дисплей и тогда код не сработает.

На случай, если элементу задан visibility: visible, пустой элемент станет полупрозрачным и с зелёным ободом, прям как приведение.

Не забудьте удалить фрагмент CSS после отладки.