Хотел написать пост на Хабре, но на пост это не тянет. Хочу обсудить тему нестандартного использования кастомных тегов. Несколько лет назад за этот вопрос бы покрутили пальцем у виска, но мода на семантичность ушла, как и ушла когда-то мода на XHTML и валидаторы.
У нас есть веб компоненты и АПИ для создания кастомных элементов. Это прекрасно, что мы можем взять и создать свой тег и навешать какую-нибудь логику на него. Но то если нам никакой логики не нужно? Что если мы будем создавать свои теги, единственной "логикой" которого будет CSS?
Это особенно симпатично выглядит при использовании CSS библиотек, типа Bootstrap. Нагромождение классов делает код непривлекательным и избытоным. Вы можете сказать, что избежать кучи классов можно используя CSS препроцессор и прописывать для каждого селектора список наследуемых классов. Но я ведь выбрал CSS библиотеку именно для того, чтоб писать в CSS файлы как можно меньше кода!
Вот небольшая иллюстрация с типичной бутстраповской разметкой:
<div class="container">
<div class="row-fluid">
<div class="col-md-12">
<span class="btn-lg btn-success">
I'm big success button
</span>
</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>
Выглядит явно лучше, чем оригинал. Так почему бы и нет? Единственный минус, что я могу назвать, - это то, что селекторы по атрибуту требуют больше времени на поиск элементов, чем селекторы по классу или айдишнику (сам не мерял, так говорят). Кроме этого я не совсем понимаю, как на такой код смотрят поисковые машины.
Что скажете?
Простой
