БЭМ упрощает разработку сайтов, которые нужно быстро создать и долго поддерживать. Эту технологию используют во фронтенде почти всех сервисов Яндекса, и она уже успела обрасти множеством библиотек и инструментов, которыми мы хотим с вами поделиться. С обширным арсеналом БЭМ, со всей его модульностью и мощью, вам останется «всего-то» придумать идею и реализовать её.

Этой реализацией 5-6 июля в Одессе на «Тусовке для front-end разработчиков» OdessaJS 2014 и занимались разработчики Яндекса Евгений Константинов и Дмитрий Белицкий в рамках полного мастер-класса по БЭМ.

Что в него вошло? Рассказ о том, в чём преимущество вёрстки независимыми блоками, что такое уровни переопределения, готовые библиотеки блоков и инструменты для автоматизации сборки. Демонстрация разных инструментов — например, autoprefixer, css-препроцессора Roole или модульной системы YModules. Живой пример пользы декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельная часть мастер-класса была посвящена декларативным шаблонам BEMHTML и BEMTREE, которые позволяют преобразовывать сырые данные во view-ориентированный BEMJSON. Вместе с разработчиками на мастер-классе можно было написать серверную часть приложения в БЭМ-методологии и использовать данные от разных социальных и поисковых сервисов (RSS с Яндекс.Фоток, API Twitter и Instagram). В результате получился работающий сайт и практическая демонстрация полного стека БЭМ-технологий.

Видео с мастер-класса

Слайды

Приятного просмотра и Stay BEMed!