Finom
@Finom

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

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


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

Что скажете?
  • Вопрос задан
  • 812 просмотров
Пригласить эксперта
Ответы на вопрос 8
miraage
@miraage
Старый прогер
Вообще ужасно выглядит.
Ответ написан
kravasuper
@kravasuper
и чо и чо?
все должны перейти на это потому что ты используешь БАТСТРАП? а как же остальные люди которые не пользуются им?
в каком месте это выглядит лучше?
Ответ написан
Комментировать
S-ed
@S-ed
Комбайнёр
По комментариям Вы бы уже должны были понять, что подобная статья на Хабре схватит кучу минусов.
Одним из ключевых факторов разработки является - сопровождение. Ваш код - понятен и удобен лично Вам.
Если Вам хочется - Вам никто не запретит, но лично я бы с таким кодом работать не стал.
Ах да, самое важное:
caniuse.com/#feat=custom-elements
Ответ написан
Комментировать
Тоже была такая мысля после того как начал изучать Angular :) Имхо это действительно не решает никакой проблемы или задачи, не дает никаких плюсов, в отличии от случая с XML -> JSON)
Ответ написан
HeadOnFire
@HeadOnFire
PHP, Laravel & WordPress Evangelist
Несколько лет назад за этот вопрос бы покрутили пальцем у виска, но мода на семантичность ушла, как и ушла когда-то мода на XHTML и валидаторы.


1. И сейчас тоже крутят у виска, что вполне нормально.
2. Мода на семантичность никуда не уходила, просто семантика уже давно стала стандартом де-факто и никто просто не орет об этом на каждом углу.
3. Моды на XHTML в общем-то и не было, действительно валидный XHTML (который fatal'ы бросал из-за разметки, ага) мало кто и мало где использовал в реальности.
4. Валидаторы никуда не делись, опять же, это стандарт де-факто.
5. Вы еще забыли про Schema, ARIA и прочее. Только не называйте, например, accessibility - модой. А то люди у виска еще долго будут крутить и смотреть на вас косо.
Ответ написан
Комментировать
Finom
@Finom Автор вопроса
Вот, кстати, подкинули на яваскриптовом форуме: https://github.com/MikeCostello/bootstrap-web-comp...
Идея вполне себе живая.
Ответ написан
@svgishe
Разработчик, дизайнер, SEO.
Плохая практика.
Ответ написан
Комментировать
Kater-auf-Dach
@Kater-auf-Dach
Никого не трогаю, починяю примус, верстаю...
Слишком много подводных камней при совершенно не очевидном (до полного отсутствия) профите.
Куда интереснее в этом плане смотрится методология AMCSS от Глена Маддерна. Хотя и там немало проблем.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы