WebHive

Итак как и обещал начинаю серию статей по созданию сайта на полном стэке БЭМ технологий. Для начала определимся со структурой сайта и данными для него, а так же подготовим инфраструктуру.

По ходу изучения БЭМ методологии лично у меня возник целый ряд непонятных и даже на первый взгляд нелогичных моментов. Однако проявив терпение и изрядно покопавшись в форумах и разного обсуждениях я нашёл ответ на свои вопросы, что и хочу изложить в данной статье, чтобы не наступать лишний раз на грабли.

После статьи про БЭМ CSS погрузился в дивный мир современных CSS технологий. В связи с тем, что сам я в основном работаю с Rails, то как оказалось я немного отстал от жизни и пропустил такую интересную штуку как PostCSS, которая потихоньку становится мэйнстримом, чему в немалой степени способствует застой в мире SASS, Compass, Stylus и иже с ними.

После того как разобрались со стандартными блоками и стилями осталось только добавить поддержку клиентского яваскрипта.

В статье Добавляем стили в БЭМ проект мы научили БЭМ проект понимать CSS. Но мы живём уже в 21 веке и использовать голый CSS уже как-то стремновато. Есть же SASS и Stylus. Поэтому давайте-ка задействуем всю мощь этих технологий и попробуем подключить их к нашему БЭМ проекту.

Наш проект из статьи Создаём минимальный проект на БЭМ c нуля умеет генерировать только HTML. Теперь настало время добавить генерацию CSS файлов.

Ранее в статье Создаём минимальный проект на БЭМ c нуля мы создали проект на БЭМ. Однако он пока довольно бесполезен. Пришло время расширить его добавив уже готовые решения и компоненты предоставленные компанией Yandex.

Несколько раз пытался пощупать БЭМ, но порог входа довольно высок, поэтому раз за разом бросал это дело, хотя внутренне понимал, что рациональное зерно в этом есть. На этот раз решил погрузиться полностью и попробовать собрать проект на полном стеке технологий БЭМ