Как использовать БЭМ! вне Яндекса

9 апреля 2012, 19:18

Варвара Степанова. Челябинск, 25 февраля 2012 года

Закончила Петрозаводский государственный университет. Работает в Яндексе с 2008 года разработчиком интерфейсов. Разрабатывала проекты Яндекс.Ответы и Яндекс.Фотки. Последние полтора работает над внутренним интерфейсным фреймворком, помогающим единообразно делать сервисы Яндекса. В последнее время также занята разработкой подобного интерфейсного фреймворка в open source.

О докладе

Как использовать БЭМ! вне Яндекса.

Есть мнение, что БЭМ! можно применять только в Яндексе и подобных больших компаниях для сложных проектов. Мы расскажем, почему это не так. Доклад ориентирован на любого веб-разработчика, а примеры будут основываться на таких задачах как: вёрстка HTML+CSS по PSD, написание JS компонент, сборка динамического сайта с использованием PHP/Django/RoR.

презентация, pdf видео, 1.86 Гбpdf мобильное видео, 302.22 Мб

5 комментариев

Авторизуйтесь, чтобы оставить комментарий

Владимир

28 января 2016, 01:04

Спасибо за видео!

P.S. поправьте обозначение к ссылкам внизу, а то Гбpdf как-то глаза режет.

AndreyGeonya

28 января 2016, 01:04

>> Для того чтобы понять что собирать, нужно это задекларировать в файле page.bemdecl.js (8 мин. 40 сек. видео)

А в bemjson.js мы тогда что декларируем?

Владимир

28 января 2016, 01:04

bemjson.js — это декларация, которая знает про структуру страницы и про контент.

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

По bemjson.js можно автоматически с помощью bem tools построить bemdecl.js, выкинув знание про структуру и контент. Обратный процесс невозможен. Поэтому по bemdecl.js нельзя собрать html.

AndreyGeonya

28 января 2016, 01:04

19 мин. 43 сек. видео, там блок visualsearch.js положили в папку visualsearch. Как быть, если плагину для работы требуется еще 3 png-картинки? Куда их правильно положить?

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

Владимир

28 января 2016, 01:04

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

По поводу организации библиотек все не так страшно :)
Если посмотреть на код i-jquery, например, то видно, что это не переписывание библиотеки, а лишь блок-хелпер, позволяющий удобнее подключить оригинальный jquery на проект.

Нет необходимости изменять код библиотек, чтобы использовать их в БЭМ-проектах. При желании можно написать обертку, предоставляющую интерфейс к ним в терминах i-bem.js, но чаще всего это будет просто блок хелпер, который зависит от оригинального кода библиотеки и проксирует (возможно как-то дополняя) ее методы.