Какими технологиями реализовать компонентную вёрстку (по типу БЭМ)?
В очередной раз матерясь, переделывая вёрстку страницы, я всё больше убеждаюсь в удобстве подхода, который предлагают ребята из яндекса (БЭМ): создание независимых, реюзабельных компонентов.
В скором времени по работе придётся много верстать посадочных страниц, посему возник такой вопрос: как же лучше организовать рабочее окружение и какие выбрать технологии. И если со стилями всё довольно просто (на каждый блок/элемент/модификатор создавать 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 (пусть и с расширенным синтаксисом). Верстальщикам будет неудобно.
Ну или небезызвестный Polymer от Google.
Я бы лично смотрел в сторону jade миксинов, но это уже дело вкуса либо специфика проекта.
Сложно сказать как обстоят дела с интеграцией в IDE, так как использую Sublime Text 3 и плагин AutoFileName для подобных целей.
На досуге можете почитать про atomic design.
Простой
Простой
