В конце января 2015 года по приглашению проекта LoftBlog мы провели практический вебинар по использованию полного стека БЭМ-технологий в любом из вашим проектов.

Разработчик команды БЭМ Николай Ильченко наглядно показал процесс верстки от и до на примере макета страницы Яндекс.Музыки, а также ответил на все вопросы, которые поступали во время вебинара.

Макет, видео, презентацию и ответы на вопросы мы собрали в этом посте.

Наш макет

Презентация и видео вебинара

Слайды доступны на github.

Видео также доступно на

Ответы на вопросы

Мы вынесли сюда все вопросы, которые были заданы касательно темы вебинара и своих домашних проектов, и постарались подробно на них ответить.

Есть ли какие-то примеры, где показано взаимодействие с бэкендом?

Есть. Смотрите open source проект SSSR и мастер-класс по нему.

Есть несколько фреймворков про бэкенд, которые в основе используют БЭМ подход:

• bem-yana;
• bem-node;
• bnsf и статья про него на Хабрахабре

Есть адаптер для Express.js — express-bem

Есть видео докладов про динамические сайты на БЭМ — раз и два.

Что делать, когда у блока много элементов, лежащих один в одном, но придумывать новые блоки не хочется?

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

На форуме мы обсуждали этот вопрос вот здесь

Как семантику HTML прописывать в БЭМ?

В BEMJSON есть возможность задать тег и набор атрибутов

Например, так

{
    block: 'sidebar',
    tag: 'aside',
    attrs: { role: 'complementary' },
    content: 'Контент сайдбара'
}

Документация можно найти здесь.

Однако, именно для этого у нас есть шаблоны — BEMHTML или BH

Как построен в Яндексе технологический процесс создания настоящего макета или проекта?

Яндекс — большая компания с множеством команд и сервисов. Поэтому и вариации технологического процесса в каждой команде могут быть разные в зависимости от множества условий, задач и возможностей.

У Виталия Харисова, руководителя отдела инфраструктуры разработки интерфейсов и автора БЭМ-методологии, есть доклад на подобную тему — «Как БЭМ может влиять на цикл разработки». Посмотреть его можно по ссылке.

Что если я хочу использовать шрифтовые иконки, а не обычные?

В БЭМ-проекте можно создать блок i-font, с помощью которого подключbть иконочный шрифт и миксовать его к тому блоку или элементу, которому нужно отрисовать иконку из шрифта.

На эту тему у нас тоже есть доклад. Смотрите до конца, должно быть смешно!

Кроме того, подобный вопрос также обсуждался на форуме.

Какие еще примеры больших проектов на БЭМ кроме bem.info и Яндекса существуют?

Да, правильно, большая часть сервисов Яндекса используем БЭМ. Однако этим мы не ограничиваемся.

Вот еще несколько ссылок на проекты комьюнити:

• http://www.appcurl.com/
• http://rest-trip.com/
• http://tadadom.com/
• http://ugyalta.com/
• http://vrachi.ru/
• http://myweddy.ru/
• http://ashifin-gubernator.ru/
• http://posmotri-vrn.ru/
• http://polavkam.ru/
• http://domjourvrn.ru/
• http://voronezharts.ru/ru
• http://elkanomer.ru/
• http://new.factory.mn/

Есть ли у вас нечто наподобие плагина для редактора по вашим библиотекам, с автодополнением и подсказками?

Есть несколько полезных плагинов. Например, набор сниппетов для написания bemhtml шаблонов для Atom и Sublime text 2, а также набор сниппетов для быстрого написания bemjson для Atom.

Что такое borschik? Что такое фриз картинок? Как минифицировать CSS и JS в БЭМ инструментах?

borschik — специальный инструмент для сборки файлов текстовых форматов. Мы не раз рассказывали про него на Я.Субботниках и других конференциях. Подробная документации и статья для дополнительного изучения лежат здесь.

Зачем создавать файлы на каждый идентификатор? Для более быстрой загрузки страницы? Или для удобства редактирования элементов?

Одной из причин создания дополнительных папок действительно является удобство редактирования и поддержка блока. Еще одной немаловажной причиной является необходимость сборки только нужных для страницы частей.

Мог ли я использовать Sass вместо Stylus?

Да, можешь.

Для bem-tools у нас есть готовая технология для компиляции Sass.

Для ENB (сборщик, который используется для сборки проекта в видео вебинара) такую технологию можно сделать самому по аналогии с технологией для Stylus.

С помощью поиска находится также вот такой вариант для Sass.

Проводили ли вы соревнования по скорости вёрстки по БЭМ и более классическим образом с препроцессорами?

Верстка по БЭМ и использование препроцессоров никак не противоречат друг другу.

Однако, использование препроцессоров в больших проектах, на наш взгляд, упрощает жизнь разработчикам, позволяя сохранять длинные, но семантичные классы.

В библиотеке блоков bem-components мы используем для этого препроцессор Stylus.

Расскажи, как из редактора можно смотреть документацию БЭМ-библиотек?

Каждый блок может быть реализован в технологии документации. Например, в библиотеке bem-components в папке каждого блока лежит такой markdown файл.

Почему в папке блока header в элементе user файл стиля называется headeruser.styl? Почему бы не называть, например, css.styl? Есть ли в этом какой-то особый смысл?

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

Расскажи про bem-cli?

Статья, посвященная этому инструменту, есть на нашем сайте.

Если коротко — это микро-утилитка, позволяющая запускать локально установленный bem-tools без необходимости вводить полный путь к бинарнику. Еще более удобный способ — добавить в переменную окружения PATH путь ./node_modules/.bin

А как вы смотрите на Yeoman? Можно создать Yeoman Generator, который позволит собрать проект на основе вопросов к разработчику? Есть ли bem-tools в Yeoman?

Готовый генератор БЭМ-проектов на Yeoman можно найти здесь.

Что говорить клиенту рядовой веб-студии про БЭМ?

Зависит от того, в каком ключе клиент интересуется и в каком объеме используется БЭМ.

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

Но, вы уверены, что клиент в полной мере поймет это? Кажется, что клиент затем и обратился к вам, чтобы вы решили проблему выбора технологий и сделали проект за него :)

Сравнивали ли вы скорость шаблонизации BEMHTML с другими шаблонизаторами?

Мы знаем очень мало шаблонизаторов, которые по выразительности можно было бы сравниватьс BEMHTML.

Есть упрощенный аналог BH, он несколько менее гибкий, но чуть более быстрый. Есть XSLT, который и вдохновил нас на разработку BEMHTML. При переходе с него на BEMHTML в Яндексе мы получили выигрыш в скорости.

Сравниваться же с императивными шаблонизаторами, на наш взгляд, не имеет смысла — они всегда будут быстрее, однако, на них невозможно будет сделать то, что делает BEMHTML.

Web-components, React или БЭМ-стек — что круче?

Web-components и БЭМ решают схожие задачи. БЭМ делает это дольше и в любых браузерах, Web-components — нет. Если вы смотрели этот вебинар, то наверняка уже слышали развернутый ответ.

Что касается React.js — он решает другие задачи и его можно использовать как вместе с Web-components, так и вместе с БЭМ.

Нам нравится идея React и мы думаем в этом направлении. Сейчас есть прототипы решения от Димы Филатова под названием bem-react и bem-components-react.

Видео мастер-класса Слава Аристова об использовании React и БЭМ «Реактивные интерфейсы с React.js и БЭМ: мастер-класс» можно найти по ссылке.

Вписывается ли идеология и возможности Webpack в БЭМ-методологию? Возможно ли с его помощью собирать БЭМ-библиотеки (bem-core, bem-components) и удовлетворять зависимости, следуя методологии? Какие могут быть препятствия?

С помощью Webpack можно собрать простой проект на БЭМ. В качестве примера можно посмотреть на проект. Однако, архитектура и идеология Webpack не позволяют решать все задачи, которые уже решены в bem-tools и ENB.

Что делать, если стили блока должны меняться в зависимости от модификаторов родителя?

Методология БЭМ не запрещает использовать каскад. Развернутый ответ есть на форуме, он тут.

Что такое «уровни переопределения» и как мне это поможет на двух landing page'ах?

У нас на сайте есть отличная документация про это.

Но если кратко, то уровни переопределения позволяют вам изменять или дополнять блок в зависимости от разного уровня проекта и кейса его использования, не затрагивая базовую реализацию и избегая копипаста.

Так, например, для первого лендинга реализовали компонент, который нужен и на втором, но с некоторыми изменениями. Тогда общую часть можно положить на базовый уровень, а в части, нужной для каждого конкретного лендинга, лишь добавлять недостающие свойства.

У меня есть проект на PHP (Yii). Как навести там порядок в стилях? Кроме нотации можно как-то организовать сборку блоков?

Эту тему уже обсуждали на БЭМ-форуме в этом топике.

Кроме того, есть возможность использовать шаблонизатор ВH для PHP.

Я хочу использовать JQuery в БЭМ. Как это сделать? И стоит ли? Какие БЭМ-инструменты вы можете мне предложить?

Для написания декларативного javascript для БЭМ-блоков мы используем фреймворк i-bem.js, который представлен в виде отдельного блока i-bem из базовой для БЭМ-проектов библиотеки блоков bem-core.

Фреймворк использует jQuery для работы с БЭМ-предметной областью, расширяя возможности jQuery хелперами для работы с БЭМ-блокам. Например, установка и удаление модификаторов, вставка БЭМ-блоков в DOM-дерево, поиск блоков на странице и другие полезные методы, которые позволяют писать javascript, не завязываясь на то, как представлен блок в html.

Кроме этого i-bem.js позволяет использовать компонентный подход к разработке, разделяя код на отдельные, поддерживаемые и легко тестируемые части.

Пример:

modules.define('block-name', ['i-bem__dom', 'jquery'], function(provide, BEMDOM, $) {
    provide(BEMDOM.decl(this.name, {
        onSetMod: {
            js: {
                inited: function() {
                    // Пример методов из API i-bem.js

                    // jQuery объект блока, который указывает на отличие от $('.block-name') 
                    // на экземпляр текущего блока
                    this.domElem 

                    // Например, чтобы подключить ваш плагин к блоку, 
                    // достаточно получить его jQuery объект и позвать плагин 
                    this.domElem.datepicker();

                    // jQuery объект элемента(ов) блока, кеширует результаты выборки
                    this.elem('elem-name') 

                    // То же самое, что и с блоком, чтобы подключить ваш плагин к элементу блоку
                    this.elem('elem-name').datepicker();

                    // Устанавливает класс модификатора для блока, 
                    // $('.block-name').addClass('block-name_active_yes')
                    this.setMod('active', 'yes') 

                    // Находит блок внутри 
                    this.findBlockInside('button') 
                }
            }
        }
    }));
});

Куда записываются внешние стили блока? Это часть блока или нет?

В основе концепции БЭМ лежит понятие независимости блоков, в том числе и на уровне CSS.

Блок не должен знать, как его будут использовать другие блоки.

Про отличный пример сказанных слов можно прочитать здесь.

Как создавать папки с БЭМ-блоками в проект из терминала?

Для этого в проекте должен быть установлен модуль bem-tools.

Что такое «зависимости»?

Документацию об этом читайте здесь.

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

Есть ли возможность создания deps.js файла на основе обычного HTML файла?

Да, это возможно. В качестве примера смотрите прототип.

Почему в видео вебинара нужно делать findBlockInside('button'), а не миксовать элемент player__play-button на DOM-элемент блока button и не искать этот элемент this.elem('play-button')?

В данном случае, мы хотели использовать API блока button, который тригерит БЭМ-событие click при нажатии на кнопку, поэтому мы нашли блок на элементе.

Описание этого кейса можно найти в документации по i-bem.js.

Бонус-трек

В процессе подготовки к вебинару мы решили, что смотивируем пользователей на активное знакомство с БЭМ-платформой и придумали небольшое задание. Описание его и прием работ идет в этом топике на нашем форуме до 23 февраля включительно. Спешите!

Всем удачи в освоении и Stay BEMed!