Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   Рассуждение на тему кастомных тегов. А почему бы и нет? (https://javascript.ru/forum/offtopic/57511-rassuzhdenie-na-temu-kastomnykh-tegov-pochemu-i-net.html)

FINoM 06.08.2015 17:49

Рассуждение на тему кастомных тегов. А почему бы и нет?
 
Дублирую вопрос с Тостера, так как интересно услышать и здешнее мнение.

Хотел написать пост на Хабре, но на пост это не тянет. Хочу обсудить тему нестандартного использования кастомных тегов. Несколько лет назад за этот вопрос бы покрутили пальцем у виска, но мода на семантичность ушла, как и ушла когда-то мода на 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>



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

Что скажете?

kobezzza 06.08.2015 17:55

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

.b-button
  &__icon
    ...

  &__text
    ...


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

nerv_ 06.08.2015 17:59

Цитата:

Сообщение от FINoM
Хочу обсудить тему нестандартного использования кастомных тегов.

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

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

FINoM 06.08.2015 18:05

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

FINoM 06.08.2015 18:23

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

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

nerv_ 06.08.2015 18:30

Цитата:

Сообщение от FINoM
без Shadow DOM, template, атрибута scope для стилей и пр. Т. е. Обычная верстка сайта

тогда см. ответ на тостере
Цитата:

Пока у нас есть Emmet, я не вижу в этом смысла.
или транслятор себе какой-нибудь настрой

FINoM 06.08.2015 18:41

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

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

kobezzza 06.08.2015 18:48

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

nerv_ 06.08.2015 19:30

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

FINoM 06.08.2015 20:45

nerv_, спасиб.


Часовой пояс GMT +3, время: 02:02.