@bromzh
Drugs-driven development

Какими технологиями реализовать компонентную вёрстку (по типу БЭМ)?

В очередной раз матерясь, переделывая вёрстку страницы, я всё больше убеждаюсь в удобстве подхода, который предлагают ребята из яндекса (БЭМ): создание независимых, реюзабельных компонентов.
В скором времени по работе придётся много верстать посадочных страниц, посему возник такой вопрос: как же лучше организовать рабочее окружение и какие выбрать технологии. И если со стилями всё довольно просто (на каждый блок/элемент/модификатор создавать css/less-файл, а потом их собирать в один файл стилей), то с самой разметкой элементов возникают трудности.

Что хочется:
Независимость от шаблонного языка. Сделать подобную штуку на каком-либо языке шаблонов в рамках одного фреймворка легко: тот же JSF изначально предполагает создание компонентов, в Jinja2 есть макросы и т.д. Однако, не всегда требуется использовать фреймворк, иногда надо просто сверстать статическую страницу. В идеале, хочется компиляции кода блока под популярные шаблонные движки из некой структуры.
Хорошая поддержка средами разработки. Не все редакторы могут хорошо работать с некоторыми движками шаблонов, поэтому хочется выбрать что-то популярное.
Не слишком большая сложность инструментов. Некоторые решения довольно сложны для изучения и использования, особенно для верстальщиков, которые не знакомы с языками программирования. Хочется чего-то простого.
Гибкость. Некоторые блоки (например меню) могут содержать разные элементы: в одном проекте это просто 5 кнопок-ссылок, в другом это будут сложные элементы и т.д. Хочется иметь возможность описывать блок абстрактно, при этом, в итоговой странице использовать шаблонные теги (если планируется использовать шаблонизатор)

Какие варианты я рассмотрел сам:
bem-tools. Увы, это довольно сложный инструмент. Верстальщику довольно трудно будет вникнуть во все ньюансы использования этой штуки. К тому же, документация по ним сейчас отстаёт от текущей версии (я пытался сделать, как описывается на сайте, но в ответ получаю предупреждения о deprecated API, а документации по API v2 пока нет). Да и сами инструменты иногда довольно сырые, некие части находятся в статусе разработки. Плюс, не всем верстальщикам удобно будет верстать в непривычном "JSON-стиле".
gulp-file-include довольно удобная штука: описываешь куски разметки в html, потом просто вставляешь их в нужные места. Минусы - отсутствие поддержки в IDE, проставлять все классы для модификаторов надо вручную.
jade+jade mixins. Есть хороший миксин для jade, который позволяет легко описывать блоки, элементы внутри них и модификаторы. Однако, возникают трудности, когда хочется сделать некий блок гибким, которые возникают из-за граничений jade в плане мультиблоков внутри миксинов. Есть костыли, но они неудобные. Да и сам синтаксис непривычен. Плюс, этот вариант сложно использовать с другими шаблонными движками (в джанго, например).
XSLT. В яндексе его используют в самом БЭМ, однако, он немного громоздкий, да и скорее всего надо будет писать свой велик для сборки проекта, так как bem-tools пока отпадает.
ReactJS/JSX. Минус - описание компонентов на JS (пусть и с расширенным синтаксисом). Верстальщикам будет неудобно.

Итак, какие ваши предложения?
  • Вопрос задан
  • 4793 просмотра
Пригласить эксперта
Ответы на вопрос 1
eko24
@eko24
FullStack Developer (Node, RoR, Python)
Ну или небезызвестный Polymer от Google.
Я бы лично смотрел в сторону jade миксинов, но это уже дело вкуса либо специфика проекта.
Сложно сказать как обстоят дела с интеграцией в IDE, так как использую Sublime Text 3 и плагин AutoFileName для подобных целей.
На досуге можете почитать про atomic design.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
25 апр. 2024, в 12:20
15000 руб./за проект
25 апр. 2024, в 12:08
300 руб./за проект
25 апр. 2024, в 11:49
25000 руб./за проект