Автор этой статьи затронул по-моему мнению очень важную тему, но может как-то не очень подробно её раскрыл, написание комментария с ответом вылилось в этот пост.
Речь пойдет именно о тегах с кастомными именами, не о веб-компонентах.
Давайте посмотрим на то как мы сейчас пишем html
wait
обратите внимание что в этом конкретно примере важно для разработчика, а что является бойлерплейтом? Мы видим что есть loader с контетом wait и этот элемент блочный (но это неточно надо глянуть в css стили еще), а вот это типовой/boilerplate код.
В препроцессоре html pug (jade) созданном чтобы упростить набор html-кода то же самое было бы записано просто вот так:
.loader wait
кому-то он кажется уже чем-то черезчур, типа сложно такую мешанину где из разделителей только пробелы читать, местами я с ними согласен.
Но посмотрите как легко и нативно мы можем избавится от больше части шаблонного кода
wait
Используя свои имена тегов мы тем самым пишем и читаем меньше бойлерплейта.
Есть и другие плюсы. Вот вы слегка прокрутили код в своей ide и видите в конце блока следущее
. . .
что это у нас закрывается? Да, вверху страницы у этих тегов есть классы и id и может какие-то другие опознавательные признаки, но что касается закрытия, в каком-то коде можно встретить комментарии с классом закрывающегося тега где-то нет, а можно писать так
. . .
Обратите внимание что я советую сократить написание бойлерплейт кода, а не тупо заменять стандартные теги на свои. То есть заголовок лучше написать так
My title
а не так
My title
потому что в данном случае, использование кастомного тега увеличивает количество шаблонного-кода, а не уменьшает.
Помимо этого так же стоит отдавать предпочтение тегам main footer article section aside когда они подходят по смыслу вместо div .
Хотелось бы еще сказать про то в каких случаях использовать классы, в каких атрибуты , а когда dataset (атрибуты с data-) и что хватит пихать все в одни только css-классы что show это не класс тега, а состояние, но это пожалуй потянет на отдельную статью.
По всем измеримым метрикам этот подход эффективнее, вы не сможете по научному / математически доказать обратное, а лишь апеллировать к субъективному восприятию , стилю / моде / удобству «наши деды так писали и мы будем» и т.п.
Что касается SEO — то поисковикам совершенно без раницы
(а скорее после компиляции реактом это будет какой-нибудь
) или и если бы дело было только в SEO то хотя бы закрытые авторизацией SPA писали бы уже с использованием кастомных имён.
В соответствии со спецификацией html имена своих тегов обязательно должны содержать разделитель «черточка» -, но я лично не нашел доводов против использования имен без черточек, — работает на всех устройствах до которых удалось дотянуться, ровно так же как и , там нет какого-то лага / дополнительного парсинга или чего-то еще, разве что из него нельзя позже сделать из этого тега веб-компонент, без переименовывания.
Я же вижу что многие просто пишут по старинке, новички и не знают что так можно потому что не видели примеров, мидлы всё еще боятся -, а вдруг где-то (на умном холодильнике) это да не сработает, а сеньёрам вообще не до того)
Я же призываю вас писать более лаконичный и выразительный код, ну или как мимнимум не сопротивляться таким вот «нововведениям» в вашей кодовой базе. Это ведь даже не какое-то ноу-хау, не очередной модный фреймворк о котором потом все забудут — это обычный html который так работает уже больше 10 лет, на котором вы и так пишете, но делаете это… ну как в примерах выше)
