Стажировка 2015. Разработка. Занятие 9. bem

Б Э М

Блок

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

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

Элемент(часть блока)

● навигационное меню (блок), содержащее пункты меню (элементы);

● таблица (блок), внутри которой строки, ячейки и заголовки (элементы).

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

Система именования Блоков

.b-heading

.b-text-input

Система именования Элементов

.b-text-input__label

.b-text-input__text-field

.b-block__elem1__elem2

Система именования Модификаторов

.b-text-input_disabled

.b-select__option_selected

.b-heading_level_alpha<div class="b-heading b-heading_level_alpha">BEM</div>

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

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

БЭМ и файловая структура

/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field

… /b-jquery /b-model

БЭМ и файловая структура

/b-menu b-menu.js b-menu.css b-menu.tpl

БЭМ и файловая структура/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

JavaScritpBEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } },

open: { yes: function() { this.populateList(); } } },

/* … */

ru.bem.infocssguidelin.es