От автора: БЭМ или Блок-Элемент-Модификатор – это методология, система именования, а также набор инструментов. БЭМ создана в Яндексе и предназначена для быстрой разработки в крупных командах. В этом разделе мы остановимся на концепции и системе именования.
Методология БЭМ позволяет дизайнерам представлять сайты в виде коллекции повторно используемых блоков-компонентов, которые можно использовать в паре и создавать интерфейсы. Блок – это просто секция документа, например, хедер, футер или слайдер, как показано на Рисунке 2.3. Скорее всего, под словом «блок» здесь понимаются HTML-сегменты, из которых сделана страница или приложение.
Рисунок 2.3. у домашней страницы может быть хедер, главный блок и футер
Внутри блоков могут быть другие блоки. Например, в хедере может быть логотип, меню и форма поиска (см. Рисунок 2.4.). В блоке футера может быть блок карты сайта.
Рисунок 2.4. блок хедера, внутри которого блоки логотипа, меню и поиска
Элемент – более детальная структура. Из документации БЭМ: «Составная часть блока, которая не может использоваться в отрыве от него.»
Например, в блоке поисковой формы есть текстовый инпут и кнопка, как показано на Рисунке 2.5. Под словом «элемент» понимается элемент с точки зрения дизайна, а не HTML.
Рисунок 2.5. блок поиска с текстовым инпутом и кнопкой
Блок основного контента может хранить в себе блок со списком статей. Блок со списком статей может содержать набор блоков с кратким текстом статей. А в каждом блоке с промо статьи может быть изображение, краткий текст и ссылка «подробно», как показано на Рисунке 2.6.
Рисунок 2.6. блок с кратким описанием статьи
Вместе блоки и элементы образуют основу системы именования БЭМ. По правилам БЭМ:
Имена блоков в проекте должны быть уникальными.
Имена элементов в блоке должны быть уникальными.
Вариации блоков (например, блок поиска с темным фоном) должны создавать путем добавления модификатора в класс.
Имена блоков и элементов разделяются двойным нижним подчеркиванием (.block__element). Имена блоков и элементов отделяются от модификаторов двойным тире (например, block—modifier или .block__element—modifier).
Пример использования БЭМ в форме поиска:
|
1 2 3 4 5 6 7 |
<form class="search"> <div class="search__wrapper"> <label for="s" class="search__label">Search for: </label> <input type="text" id="s" class="search__input"/> <button type="submit" class="search__submit">Search</button> </div> </form> |
Вариант этой формы с темным фоном:
|
1 2 3 4 5 6 7 |
<form class="search search--inverse"> <div class="search__wrapper search__wrapper--inverse"> <label for="s" class="search__label search_label--inverse">Search for: </label> <input type="text" id="s" class="search__input search__input--inverse"> <button type="submit" class="search__submit search__submit-inverse">Search</button> </div> </form> |
CSS будет таким:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.search { color: #333; } .search--inverse { color: #fff; background: #333; } .search__submit { background: #333; border: 0; color: #fff; height: 2rem; display: inline-block; } .search__submit--inverse { color: #333; background: #ccc; } |
И в разметке и в CSS search—inverse и search__label—inverse являются дополнительными классами. Они не заменяют search и search__label. В системе БЭМ используются только селекторы классов. Могут использоваться дочерние и родительские селекторы, но родительские селекторы все равно должны быть классами. Элементные селекторы и ID запрещены. Так обеспечивается низкая специфичность селекторов, отсутствие сторонних эффектов у селекторов и разделение CSS и разметки. Принудительные уникальные имена блоков и элементов предотвращают коллизии, которые могут возникать среди разных команд.
У данного подхода несколько преимуществ:
новым членам команды легче читать и понимать разметку и CSS;
чем больше разработчиков, тем выше продуктивность;
последовательное именование снижает риск возможных коллизий и непредсказуемых эффектов;
CSS отделен от разметки;
CSS можно использовать повторно.
Про БЭМ можно много чего сказать, что не уместится в одну главу. Официальный сайт БЭМ детально описывает методологию, там вы найдете инструменты и уроки. Более подробно изучить систему именования БЭМ можно на еще одном удивительном ресурсе — Get BEM.
Автор: Tiffany Brown
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
