Верстка при помощи Yandex BEM

1. Б Э М

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

3. Блок
● заголовок
● кнопка
● навигационное меню

7. Элемент(часть блока)
● навигационное меню (блок),
содержащее пункты меню
(элементы);
● таблица (блок), внутри которой
строки, ячейки и заголовки
(элементы).

9. Модификаторы
определяют свойства или состояния

11. Система именования Блоков
.b-heading
.b-text-input

12. Система именования Элементов
.b-text-input__label
.b-text-input__text-field
.b-block__elem1__elem2

13. Система именования Модификаторов
.b-text-input_disabled
.b-select__option_selected
.b-heading_level_alpha
<div class="b-heading b-heading_level_alpha">BEM</div>

14. Если вам нравится другой способ
именования — используйте его,
только убедитесь, что у вас есть на
то технологическая причина.

15. Альтернатива наименования

16. БЭМ и файловая структура
/blocks
/b-button
/b-heading
/b-flyout
/b-menu
/b-text-field
…
/b-jquery
/b-model

17. БЭМ и файловая структура
/b-menu
b-menu.js
b-menu.css
b-menu.tpl

18. БЭМ и файловая структура
/b-menu
/__item
b-menu__item.css
b-menu__item.tpl
/_horizontal
b-menu_horizontal.css
/_theme
/_dark
b-menu_theme_dark.css
/_light
b-menu_theme_light.css
b-menu.css
b-menu.js
b-menu.tpl

19. JavaScritp
BEMDOM.decl('b-dropdown', {
onSetMod: {
disabled: function(modName, modVal) {
this.getLabel().setMod('hidden', 'yes');
if (modVal === 'yes') {
this.getPopup().hide();
}
},
open: {
yes: function() {
this.populateList();
}
}
},
/* … */

20. ru.bem.info
cssguidelin.es