Владимир Варанкин — «БЭМ»

Разработчик интерфейсов

БЭМ

Владимир Варанкин

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

Проекты в Яндексе

• Живут долго• Делаются быстро• Легко поддерживаются и развиваются• Большая команда• Много кода

Методология

Методология — учение об организации деятельности

Принципы БЭМ-методологии

Методология

• разделение кода на части

• разделение кода на части• общая предметная область

Общая предметная область

• разделение кода на части• общая предметная область• разделение ответственности

• разделение кода на части• общая предметная область• разделение ответственности• повторное использование кода

• разделение кода на части• общая предметная область• разделение ответственности• повторное использование кода• сборка кода в финальный runtime

Определения

Блок

Элемент

Модификатор

Уровень переопределения

Сборка

Пример

Карточка товара

Пример

Блок

Элементы

БЭМ-дерево

Пример

БЭМ-дерево

<block name="product"> <elem name="title"> Световой меч...</elem>

<elem name="info"> Хорошо держит форму...</elem>

Организация файловой структуры

Пример

blocks/ └── product/

blocks/ └── product/ └── product.css

Технология

blocks/ └── product/ ├── product.bemhtml ├── product.png ├── product.js └── product.css

/* product.css */

.product{ color: #000;

font: 13px Verdana, sans-serif;}

blocks/ └─ product/ ├─ title/ ├─ picture/ ├─ price/ ├─ price-value/ ├─ ... └─ product.css

blocks/ └─ product/ ├─ title/ └─ product__title.css ├─ picture/ └─ product__picture.css ├─ ... └─ product.css

Файлы → БЭМ-дерево

/* product__title.css */

.product__title{ display: block;

font-size: 24px; font-weight: bold;

margin-left: -1ex;}

blocks/ └─ product/ ├─ title/ ├─ picture/ ├─ price/ ├─ price-value/ ├─ ... └─ product.css

/* product__price.css */

.product__price{ font-size: 12px;}

.product__price-value{ color: #390; font-size: 24px;}

</body></html>

Пришел менеджер...

Пример

Пришел менеджер

Блок

Элементы

БЭМ-дерево

Пример

<block name="product"> <elem name="title"> Световой меч...</elem> <elem name="picture"> <block name="illustration"> <elem name="image" size="mid" src="n52-105-medium.png"/> <elem name="zoom"> Большое изображение</elem></block>

<elem name="price"> <elem name="price-value" value="33700"/><elem> <elem name="info"> Хорошо держит форму...</elem>

Файловая структура

Пример

blocks/ ├─ product/ └─ illustration/

blocks/ ├─ product/ └─ illustration/ ├─ image/ └─ illustration__image.css └─ zoom/ ├─ illustration__zoom.css └─ illustration__zoom.png

blocks/ ├─ product/ └─ illustration/ ├─ image/ ├─ _size/ ├─ illustration__image_size_sm.css ├─ illustration__image_size_mid.css └─ illustration__image_size_big.css └─ illustration__image.css └─ zoom/ └─ ...

blocks/ ├─ product/ └─ illustration/ ├─ image/ ├─ _size/ ├─ illustration__image_size_sm.css ├─ illustration__image_size_mid.css ├─ illustration__image_size_big.css └─ illustration__image_size_big.png └─ illustration__image.css └─ zoom/ └─ ...

/* illustration__image_size_mid.css */

. illustration__image_size_mid{ display: block;

width: 300px;}

blocks/ ├─ product/ └─ illustration/ ├─ image/ └─ ... ├─ zoom/ └─ ... └─ illustration.js

// illustration.js

(function($, undefined) {

$('.illustration__zoom').on('click', function() {

var sizeBig = $(this).data('size-big');

// ...

}(jQuery));

events.yandex.ru/talks/293

Утилиты

github.com/bem/bem-tools

Утилита для работы с файлами, написанными по БЭМ-методу

BEM tools

github.com/bem/bem-tools

Создание сущностей

Сборка финального runtime

Разработческий сервер

BEM tools

› bem --help

BEM tools

› bem --help

Tools to work with files written using the BEM-method.See http://bem.github.com/bem-method/ for more info.

Usage: bem COMMAND [OPTIONS] [ARGS] bem [OPTIONS] [ARGS]

Commands: create : Create of entities tool. build : Build tool. server : Development server. make : BEM make. decl : Usage declaration manipulation tool. completion : Shell completion.79

BEM tools

› bem --help

Tools to work with files written using the BEM-method.See http://bem.github.com/bem-method/ for more info.

Usage: bem COMMAND [OPTIONS] [ARGS] bem [OPTIONS] [ARGS]

Commands: create : Create of entities tool. build : Build tool. server : Development server. make : BEM make. decl : Usage declaration manipulation tool. completion : Shell completion.80

bem create:создание БЭМ-сущностей

BEM Tools

bem create

– уровни переопределения– блоки– элементы– модификаторы

bem create

› bem create --help

bem create

› bem create --help

Usage: bem create COMMAND [OPTIONS] [ARGS] bem create [OPTIONS] [ARGS]

Commands: level : Level. block : Block. elem : Block element. mod : Modifier.

bem create

› bem create block --help

bem create

› bem create block --help

Usage: bem create block [OPTIONS] [ARGS]

Options: -h, --help : Help -C DIR, --chdir=DIR : change process working directory, cwd by default; to specify level use --level, -l option instead -t ADDTECH, --add-tech=ADDTECH : add tech -T FORCETECH, --force-tech=FORCETECH : use only specified tech -n NOTECH, --no-tech=NOTECH : exclude tech -l LEVEL, --level=LEVEL : level directory path, default: ./ -f, --force : force files creation

Arguments: NAMES : blocks names

bem create

› bem create block illustration --level=blocks --add-tech=css

bem create

› bem create block illustration --level=blocks --add-tech=css

blocks/ └─ illustration/ └─ illustration.css

bem create

› bem create mod size --level=blocks

--block=illustration

--elem=image

--val=mid

--add-tech=css

bem create

› bem create mod size --level=blocks

--block=illustration

--elem=image

--val=mid

--add-tech=css

blocks/ └─ illustration/ └─ image/ └─ _size/ └─ illustration__image_size_mid.css

bem build:сборка файлов страниц

BEM Tools

bem build

Собирает файлы страниц в различных технологиях, основываясь на декларации.

bem build

› bem build --help

БЭМ дерево ⟹ Декларация ⟹ Страница

bem build

› bem build [...] -o pages/index -n index

--tech=css

--level=blocks

bem build

› bem build [...] -o pages/index -n index

--tech=css

--level=blocks

pages/ └─ index/ └─ index.css

/* index.css */

@import url(blocks/product/product.css);@import url(blocks/product/title/...);@import url(blocks/product/picture/...);...@import url(blocks/illustration/figure.css);@import url(blocks/illustration/image/...);...

bem build

› bem build [...] -o pages/index -n index --tech=js --level=blocks

bem build

› bem build [...] -o pages/index -n index --tech=js --level=blocks

pages/ └─ index/ └─ index.js

/* index.js */

/*borschik:include:blocks/product/product.js*//*borschik:include:blocks/product/title/...*//*borschik:include:blocks/product/picture/...*/.../*borschik:include:blocks/illustration/illustration.js*//*borschik:include:blocks/illustration/image/...*/...

bem build

pages/ └─ index/ ├─ index.html ├─ index.xsl ├─ index.bemhtml.js ├─ index.js ├─ index.css ├─ index.ie.css ├─ index.coffee └─ index.ts

bem build

pages/ └─ index/ ├─ index.html ├─ index.xsl ├─ index.bemhtml.js ├─ index.js ├─ index.css ├─ index.ie.css ├─ index.coffee └─ index.ts

events.yandex.ru/talks/289/

Пример

Пришел менеджер

БЭМ-дерево

Пример

<block name="product"> <elem name="title"> Световой меч...</elem> <elem name="picture"> <block name="illustration"> <elem name="image" size="mid" src="n52-105-medium.png"/> <elem name="zoom"> Большое изображение</elem></block>

<elem name="order-btn">Заказать<elem>

<elem name="info"> Хорошо держит форму...</elem>

...109

„Заказывать товары можно только с некоторых страниц

Файловая структура

Пример

› bem create level blocks-store

blocks/ ├─ product/ └─ illustration/blocks-store/

blocks/ ├─ product/ └─ illustration/blocks-store/ └─ product/

blocks/ ├─ product/ └─ illustration/blocks-store/ └─ product/ ├─ product.bemhtml ├─ product.sass └─ product.js

blocks/ ├─ product/ └─ illustration/blocks-store/ └─ product/ ├─ order-btn/ └─ product__order-btn.sass └─ ...

blocks/ ├─ product/ └─ illustration/blocks-store/ ├─ product/ ├─ order-btn/ └─ ... └─ button/ ├─ button.js └─ button.sass

› bem build [...] -o pages/store -n store --tech=sass --tech=js --level=blocks --level=blocks-store

pages/ ├─ index/ └─ store/ ├─ store.html ├─ store.css ├─ store.sass └─ store.js

/* store.sass */

@import url(blocks/product/product.css);@import url(blocks-store/product/product.sass);@import url(blocks/product/title/...);@import url(blocks/product/picture/...);@import url(blocks-store/product/order-btn/...);@import url(blocks-store/button/button.sass);...@import url(blocks/illustration/illustration.css);@import url(blocks/illustration/image/...);...

Что-то еще?

Материалы

bem.infogithub.com/bem

Материалы

Разработчик интерфейсов

varankinv@yandex-team.ru

Владимир Варанкин

github.com/narqo

Владимир Варанкин — «БЭМ»

Technology

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

Владимир Гриненко "i-bem.js: JavaScript в БЭМ-терминах"

Анонс: Хакатон по БЭМ в Москве

Владимир Варанкин — «БЭМ: практика»

Виталий Харисов "БЭМ: от методологии до платформы"

Вебинар по БЭМ: верстаем веб-страницу

Методология: БЭМ, Модули, Отношения

BEM IDE — прототип редактора БЭМ-проектов — Саша Белянский, Яндекс

Владимир Еремеев

Форум на полном БЭМ-стеке — Николай Ильченко, Яндекс

Владимир Рощупкин

Сергей Бережной "Внедрение БЭМ в существующие системы"

Владимир Варанкин "БЭМ и JavaScript: Зачем мы написали JS-фреймворк?"

Марат Дулин — ENB — сборщик проектов на БЭМ

Елена Джетпыспаева — Открытие. Новости и планы БЭМ-сообщества

Евгений Филатов "Одностраничные приложения на БЭМ и Node.js"

БЭМ в Мануфактуре

Михаил Трошев — БЭМ в Островах

бэм методология

Владимир Огнев Механопротогонияsiaz.narod.ru/razrabotki/ognev_mehanoprotogoniya_1.pdf · Владимир Огнев Механопротогония