alex baumgertner bem_in_small_projects
DESCRIPTION
How to use BEM and project-stub in small company and team.TRANSCRIPT
![Page 1: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/1.jpg)
Преимущества БЭМ для небольших проектов и компаний
BEMup в рамках YaC
2013 Москва
![Page 2: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/2.jpg)
Расскажу о:
● Немного истории, независимые блоки● Как стал применять● Какие получил плюсы● Свои наработки, заметки, тонкости
![Page 3: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/3.jpg)
Немного истории
2009-2010 до БЭМ, «независимые блоки»
![Page 4: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/4.jpg)
Немного истории
2009-2010 до БЭМ, «независимые блоки»:
● не id, а классы● каждый блок имеет префикс (b-)● в таблице стилей нет классов вне блоков
http://vitaly.harisov.name/article/independent-blocks.html
![Page 5: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/5.jpg)
Немного истории
«независимые блоки», уже плюсы:
● Независимость верстки от каскада. ● Произвольный повтор блоков● Простая организация верстки
![Page 6: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/6.jpg)
![Page 7: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/7.jpg)
Концепция независимых блоков развилась в БЭМ
![Page 8: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/8.jpg)
+ файловая структура css/js
+ bem-tools для генерации файлов технологий
+ bemjson
+ bemhtml
+ i-bem
+ самое главное...
«Блок-Элемент-Модификатор»
![Page 9: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/9.jpg)
+ файловая структура css/js
+ tools для генерации файлов технологий
+ bemjson
+ bemhtml
+ i-bem
+ project-stub!+ project-stub!
«Блок-Элемент-Модификатор»
![Page 10: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/10.jpg)
Bem-tools до project-stub
![Page 11: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/11.jpg)
Project-stub
![Page 12: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/12.jpg)
Project-stub
make
makeservercommon.blocksdesktop.blocks.techs.configs
![Page 13: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/13.jpg)
Project-stub
server
makeservercommon.blocksdesktop.blocks.techs.configs
![Page 14: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/14.jpg)
Но есть проблема...
![Page 15: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/15.jpg)
Как видит свой проект html-верстальщик небольшой студии
![Page 16: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/16.jpg)
Как он видит bem-tools
![Page 17: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/17.jpg)
Rocket science
![Page 18: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/18.jpg)
Для «классического» верстальщика непонятно, зачем:
● Bemjson? JavaScript Object Notation http://ru.wikipedia.org/wiki/JSON
![Page 19: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/19.jpg)
![Page 20: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/20.jpg)
![Page 21: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/21.jpg)
Для «классического» верстальщика непонятно, зачем:
● bemjson ● bemhtml● i-bem● Папка на каждый блок/элемент (это самое понятное из непонятного)
● Nodejs, npm, git, Консоль
![Page 22: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/22.jpg)
Это не так страшно, главное попробовать.
http://habrahabr.ru/post/162385/
![Page 23: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/23.jpg)
Это не так страшно, главное попробовать.
Bemjson + Bemhtml = Bemjson + Bemhtml =
● отвязываемся от ассемблера html.● думаем о блоках, а не о div● возможность быстрого
прототипирования верстки, например:
![Page 24: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/24.jpg)
Bemjson страницы, на которой нужно показать список секций каталога
![Page 25: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/25.jpg)
Правила генерации html
![Page 26: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/26.jpg)
Это не так страшно, главное попробовать.
i-bem i-bem ● js в декларативном стиле.● инициализация и работа js блока по требованию (live)● удобное api для работы
● хорошо структурированный и узнаваемый код :)
![Page 27: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/27.jpg)
✔Декларативность
✔Действия по установке модификатора
✔Поиск элементов
✔Инициализация по требованию
![Page 28: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/28.jpg)
Декларативность
BEM.DOM.decl('i-menu', {}, {});
if ($('.i-menu').length)
![Page 29: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/29.jpg)
Действия на изменение модификаторов
<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>
![Page 30: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/30.jpg)
Действия на изменение модификаторов
![Page 31: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/31.jpg)
Поиск и работа элементами блока
$('i-menu__item_state_current')
![Page 32: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/32.jpg)
Инициализация по требованию
![Page 34: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/34.jpg)
Блоки атомарны, написаны в едином стиле (установка/снятие модификаторов, изменение элементов и тд)
![Page 35: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/35.jpg)
Сборка статичного сайта
![Page 36: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/36.jpg)
Сборка статичного сайтаПозволяет получить все html-страницы с собранным css, js, картинками, например, такой структуры:
Скрипт https://github.com/alexbaumgertner/bem-static-build
![Page 37: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/37.jpg)
+ Структурированный код, написанный по продуманной методологии. Возможность менять html-реализацию блоков (например для кроссбраузерности или перехода на html5)
+ Своя, растущая библиотека готовых блоков решений.
+ Расширяемость и рост как проекта так и команды.
+ Быстрое прототипирование верстки в вашем дизайне (если вы студия)
Это не так страшно, главное попробовать.
![Page 38: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/38.jpg)
Растем вместе!
![Page 39: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/39.jpg)
![Page 40: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/40.jpg)
Ваш вклад
● Делиться информацией о использованиях
● Составлять примеры (возможно, на основе своих библиотек)
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
![Page 41: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/41.jpg)
Ваш вклад
![Page 42: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/42.jpg)
Свои наработки, заметки, тонкости
![Page 43: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/43.jpg)
Все на своих местах
Сделать папки избранного для текущего блока, страниц bemjson
![Page 44: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/44.jpg)
Все на своих местах
![Page 45: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/45.jpg)
.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'
![Page 46: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/46.jpg)
WebStorm live template
![Page 47: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/47.jpg)
WebStorm live templatehttps://github.com/apsavin/bem-idea-live-templates
![Page 48: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/48.jpg)
Плюсы использования БЭМ для небольших проектов и компаний:
● методология + реализация в project-stub● свои блоки● рост команды● прототипирование верстки● активное и отзывчивое сообщество. http://clubs.ya.ru/bem/
![Page 49: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/49.jpg)
Bonus track: Заготовка для нескольких типичных страниц сайтов и их блоков:
https://github.com/alexbaumgertner/prototype-on-project-stub
![Page 50: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/50.jpg)
Bonus track: Заготовка для нескольких типичных страниц сайтов и их блоков:
![Page 51: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/51.jpg)
Еще информация:
● Основы: 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/
![Page 52: Alex baumgertner bem_in_small_projects](https://reader033.vdocument.in/reader033/viewer/2022052904/557fbba5d8b42a40118b4bf6/html5/thumbnails/52.jpg)
Спасибо!
Александр Баумгертнер, дизайн-студия «ИДЕИ» http://www.d-idei.ru/
@[email protected]://github.com/alexbaumgertner
Буду рад вопросам!