Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.08.2015, 17:49
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

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

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



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

Что скажете?
__________________
"Matreshka is fucking awesome" © чувак с Reddit
Matreshka.js - Три возможности
Ответить с цитированием
  #2 (permalink)  
Старый 06.08.2015, 17:55
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

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

.b-button
  &__icon
    ...

  &__text
    ...


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

Последний раз редактировалось kobezzza, 06.08.2015 в 18:04.
Ответить с цитированием
  #3 (permalink)  
Старый 06.08.2015, 17:59
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от FINoM
Хочу обсудить тему нестандартного использования кастомных тегов.
Как раз-таки стандартного, т.к. есть shadow dom для этих целей.

Недавно polymer обновился до версии 1.х.х, можешь брать и использовать.
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #4 (permalink)  
Старый 06.08.2015, 18:05
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

nerv_, я говорю о стыке подходов: с одной стороны кастомные теги, с другой - стандартное применение (вставил, добавил стилей и всё), без Shadow DOM, template, атрибута scope для стилей и пр. Т. е. Обычная верстка сайта (даже не веб приложения).
__________________
"Matreshka is fucking awesome" © чувак с Reddit
Matreshka.js - Три возможности
Ответить с цитированием
  #5 (permalink)  
Старый 06.08.2015, 18:23
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

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

Не ожидал такого наплыва приверженцев консервативного подхода.
__________________
"Matreshka is fucking awesome" © чувак с Reddit
Matreshka.js - Три возможности
Ответить с цитированием
  #6 (permalink)  
Старый 06.08.2015, 18:30
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от FINoM
без Shadow DOM, template, атрибута scope для стилей и пр. Т. е. Обычная верстка сайта
тогда см. ответ на тостере
Цитата:
Пока у нас есть Emmet, я не вижу в этом смысла.
или транслятор себе какой-нибудь настрой
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук

Последний раз редактировалось nerv_, 06.08.2015 в 18:32.
Ответить с цитированием
  #7 (permalink)  
Старый 06.08.2015, 18:41
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

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

Вопрос только в том, чтоб непонятные дивы с непонятными классами перевести в непонятные теги с непонятными атрибутами. Не вижу принципиальной разницы между этими двумя подходами, кроме того, что второй сделает код компактнее без нужды запускать транслятор для того, чтоб открыть страницу в браузере. Но, как я ответил товарищу с тостера, это не холивар о трансляторах, это вопрос об использовании кастомных тегов там, где можно.
__________________
"Matreshka is fucking awesome" © чувак с Reddit
Matreshka.js - Три возможности
Ответить с цитированием
  #8 (permalink)  
Старый 06.08.2015, 18:48
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

FINoM, если тебе нравится, то юзай, никто тебя не покусает
__________________
kobezzza
code monkey
Ответить с цитированием
  #9 (permalink)  
Старый 06.08.2015, 19:30
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

https://github.com/MikeCostello/boot...web-components
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #10 (permalink)  
Старый 06.08.2015, 20:45
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

nerv_, спасиб.
__________________
"Matreshka is fucking awesome" © чувак с Reddit
Matreshka.js - Три возможности
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
почему один вызов load работает, а другой - нет kravru jQuery 1 16.09.2013 20:51
В Mozilla работает а в Opera нет почему? alex2012 Общие вопросы Javascript 2 03.08.2013 22:43
Почему нет движения элемента? DZHETIGAPA Элементы интерфейса 14 20.04.2011 11:15
Работа с radiobutton djsadd Элементы интерфейса 2 06.04.2011 08:37
Почему то работает, то нет? gyunduz Общие вопросы Javascript 0 22.01.2011 16:08