Преимущества БЭМ для небольших проектов и компаний

BEMup в рамках YaC

2013 Москва

Расскажу о:

● Немного истории, независимые блоки● Как стал применять● Какие получил плюсы● Свои наработки, заметки, тонкости

Немного истории

2009-2010 до БЭМ, «независимые блоки»

Немного истории

2009-2010 до БЭМ, «независимые блоки»:

● не id, а классы● каждый блок имеет префикс (b-)● в таблице стилей нет классов вне блоков

http://vitaly.harisov.name/article/independent-blocks.html

Немного истории

«независимые блоки», уже плюсы:

● Независимость верстки от каскада. ● Произвольный повтор блоков● Простая организация верстки

Концепция независимых блоков развилась в БЭМ

+ файловая структура css/js

+ bem-tools для генерации файлов технологий

+ bemjson

+ bemhtml

+ i-bem

+ самое главное...

«Блок-Элемент-Модификатор»

+ файловая структура css/js

+ tools для генерации файлов технологий

+ bemjson

+ bemhtml

+ i-bem

+ project-stub!+ project-stub!

«Блок-Элемент-Модификатор»

Bem-tools до project-stub

Project-stub

Project-stub

make

makeservercommon.blocksdesktop.blocks.techs.configs

Project-stub

server

makeservercommon.blocksdesktop.blocks.techs.configs

Но есть проблема...

Как видит свой проект html-верстальщик небольшой студии

Как он видит bem-tools

Rocket science

Для «классического» верстальщика непонятно, зачем:

● Bemjson? JavaScript Object Notation http://ru.wikipedia.org/wiki/JSON

Для «классического» верстальщика непонятно, зачем:

● bemjson ● bemhtml● i-bem● Папка на каждый блок/элемент (это самое понятное из непонятного)

● Nodejs, npm, git, Консоль

Это не так страшно, главное попробовать.

http://habrahabr.ru/post/162385/

Это не так страшно, главное попробовать.

Bemjson + Bemhtml = Bemjson + Bemhtml =

● отвязываемся от ассемблера html.● думаем о блоках, а не о div● возможность быстрого

прототипирования верстки, например:

Bemjson страницы, на которой нужно показать список секций каталога

Правила генерации html

Это не так страшно, главное попробовать.

i-bem i-bem ● js в декларативном стиле.● инициализация и работа js блока по требованию (live)● удобное api для работы

● хорошо структурированный и узнаваемый код :)

✔Декларативность

✔Действия по установке модификатора

✔Поиск элементов

✔Инициализация по требованию

Декларативность

BEM.DOM.decl('i-menu', {}, {});

if ($('.i-menu').length)

Действия на изменение модификаторов

<div class="b-popupa b-popupa__without-padding b-popupa_theme_ffffff b-popupa_direction_down b-popupa_is-bem_yes i-bem b-dropdowna__popup b-dropdowna__menu b-popupa_js_inited"> ... </div>

Действия на изменение модификаторов

Поиск и работа элементами блока

$('i-menu__item_state_current')

Инициализация по требованию

Больше примеров!● https://github.com/varya/bem-js-tutorial

Блоки атомарны, написаны в едином стиле (установка/снятие модификаторов, изменение элементов и тд)

Сборка статичного сайта

Сборка статичного сайтаПозволяет получить все html-страницы с собранным css, js, картинками, например, такой структуры:

Скрипт https://github.com/alexbaumgertner/bem-static-build

+ Структурированный код, написанный по продуманной методологии. Возможность менять html-реализацию блоков (например для кроссбраузерности или перехода на html5)

+ Своя, растущая библиотека готовых блоков решений.

+ Расширяемость и рост как проекта так и команды.

+ Быстрое прототипирование верстки в вашем дизайне (если вы студия)

Это не так страшно, главное попробовать.

Растем вместе!

Ваш вклад

● Делиться информацией о использованиях

● Составлять примеры (возможно, на основе своих библиотек)

https://github.com/varya/bem-js-tutorial/wiki/Ideas-of-examples● Issues

– https://github.com/bem/bem-core/issues

– https://github.com/bem/bem-tools/issues

– https://github.com/bem/project-stub/issues

Ваш вклад

Свои наработки, заметки, тонкости

Все на своих местах

Сделать папки избранного для текущего блока, страниц bemjson

Все на своих местах

.bashrc

alias 'bemcr'='bem create -l desktop.blocks/ -b'

alias 'bemscr'='bem create -l studioIDEI.blocks/ -b'

alias 'bempcr'='bem create -l desktop.bundles/ -b'

WebStorm live template

WebStorm live templatehttps://github.com/apsavin/bem-idea-live-templates

Плюсы использования БЭМ для небольших проектов и компаний:

● методология + реализация в project-stub● свои блоки● рост команды● прототипирование верстки● активное и отзывчивое сообщество. http://clubs.ya.ru/bem/

Bonus track: Заготовка для нескольких типичных страниц сайтов и их блоков:

https://github.com/alexbaumgertner/prototype-on-project-stub

Bonus track: Заготовка для нескольких типичных страниц сайтов и их блоков:

Еще информация:

● Основы: http://ru.bem.info/

● Еще хорошие основы http://bemclub-in.herokuapp.com/#problems

● http://habrahabr.ru/post/151931/ (комментарии)

● http://delka.name/blog/2013/04/bem-otkroveniya-prinyavshih-veru/

● Для команды дизайнер/верстальщик/серверсайд «БЭМ: от методологии до платформы»: http://tech.yandex.ru/events/yasubbotnik/riga-apr-2013/talks/686/

● Для дизайнера: БЭМ для PSD http://clubs.ya.ru/bem/replies.xml?item_no=1801 , http://test.mne-vezet.ru/pr/1/

● Об опыте погружения в методологию http://delka.name/blog/2013/04/bem-otkroveniya-prinyavshih-veru/

Спасибо!

Александр Баумгертнер, дизайн-студия «ИДЕИ» http://www.d-idei.ru/

@alexbaumgertneralexbaumgertner@yandex.ruhttps://github.com/alexbaumgertner

Буду рад вопросам!