Alex baumgertner bem_in_small_projects
-
Upload
alex-baumgertner -
Category
Technology
-
view
4.987 -
download
1
description
Transcript of Alex baumgertner bem_in_small_projects
Преимущества БЭМ для небольших проектов и компаний
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/ (комментарии)
● BEM для PSD http://clubs.ya.ru/bem/replies.xml?item_no=1801 и презентация http://test.mne-vezet.ru/pr/1/
● Для команды дизайнер/верстальщик/серверсайд «БЭМ: от методологии до платформы»: http://tech.yandex.ru/events/yasubbotnik/riga-apr-2013/talks/686/
● Об опыте погружения в методологию http://delka.name/blog/2013/04/bem-otkroveniya-prinyavshih-veru/
Спасибо!
Александр Баумгертнер, дизайн-студия «ИДЕИ» http://www.d-idei.ru/
@[email protected]://github.com/alexbaumgertner
Буду рад вопросам!