Рассуждение на тему кастомных тегов. А почему бы и нет?
 

Дублирую вопрос с Тостера, так как интересно услышать и здешнее мнение.

Хотел написать пост на Хабре, но на пост это не тянет. Хочу обсудить тему нестандартного использования кастомных тегов. Несколько лет назад за этот вопрос бы покрутили пальцем у виска, но мода на семантичность ушла, как и ушла когда-то мода на XHTML и валидаторы.

У нас есть веб компоненты и АПИ для создания кастомных элементов. Это прекрасно, что мы можем взять и создать свой тег и навешать какую-нибудь логику на него. Но то если нам никакой логики не нужно? Что если мы будем создавать свои теги, единственной "логикой" которого будет CSS?

Это особенно симпатично выглядит при использовании CSS библиотек, типа Bootstrap. Нагромождение классов делает код непривлекательным и избытоным. Вы можете сказать, что избежать кучи классов можно используя CSS препроцессор и прописывать для каждого селектора список наследуемых классов. Но я ведь выбрал CSS библиотеку именно для того, чтоб писать в CSS файлы как можно меньше кода!

Вот небольшая иллюстрация с типичной бутстраповской разметкой:

<div class="container">
  <div class="row-fluid">
    <div class="col-md-12">
      <button class="btn-lg btn-success">
        I'm big success button
      </button>
    </div>
  </div>
</div>

Выглядит знакомо?

А вот как мы, гипотетически, могли бы сделать:

<bs-container>
  <bs-row fluid>
    <bs-col md-12>
      <bs-btn lg success>
        I'm big success button
      </bs-btn>
    </bs-col md-12>
  </bs-row fluid>
</bs-container>

Выглядит явно лучше, чем оригинал. Так почему бы и нет? Единственный минус, что я могу назвать, - это то, что селекторы по атрибуту требуют больше времени на поиск элементов, чем селекторы по классу или айдишнику (сам не мерял, так говорят). Кроме этого я не совсем понимаю, как на такой код смотрят поисковые машины.

Что скажете?

Мне нравится подход с классами, методология БЕМ + Stylus и SS как шаблонизатор :)

.b-button
  &__icon
    ...

  &__text
    ...

- template button(@params)
  < button.b-button
    < span.&__icon :: @icon
    < span.&__text :: @text

Как раз-таки стандартного, т.к. есть shadow dom для этих целей.

Недавно polymer обновился до версии 1.х.х, можешь брать и использовать.

nerv_, я говорю о стыке подходов: с одной стороны кастомные теги, с другой - стандартное применение (вставил, добавил стилей и всё), без Shadow DOM, template, атрибута scope для стилей и пр. Т. е. Обычная верстка сайта (даже не веб приложения).

На тостере идет забавный срач. Кому интересно, читайте: https://toster.ru/q/238055

Не ожидал такого наплыва приверженцев консервативного подхода.

тогда см. ответ на тостере
или транслятор себе какой-нибудь настрой

nerv_, ну а зачем транслятор, если я никогда не испытывал в нем нужды? Еще один сборщик тянуть не хочется.

Вопрос только в том, чтоб непонятные дивы с непонятными классами перевести в непонятные теги с непонятными атрибутами. Не вижу принципиальной разницы между этими двумя подходами, кроме того, что второй сделает код компактнее без нужды запускать транслятор для того, чтоб открыть страницу в браузере. Но, как я ответил товарищу с тостера, это не холивар о трансляторах, это вопрос об использовании кастомных тегов там, где можно.

FINoM, если тебе нравится, то юзай, никто тебя не покусает :)

https://github.com/MikeCostello/boot...web-components :)

nerv_, спасиб.

Создание-замена стандартного html, DOM элементов, с помощью яваскрипта, внесет еще больше неразберихи и велосипедизма. + микроформаты, + замена стандартных стилей на Sass,lеss,stylus, + чехарда с нестандартными атрибутами тегов, шаблонизмы-яваскриптом. В конечном итоге, получим теже банальные панельки, менюшки, карусельки, сделанные как хочется автору кода, а не по общепринятым стандартам. Короче, демократия. Можно всё, и ещё чуть-чуть:-E

Они не будут конфликтовать с другими, будут легко плодиться и легче тестировать.
И проект будет лучше структурирован
.. догнал что говорите не компонентах, а просто кастомных тэгах