CSS-архитектура Блок-Элемент-Модификатор (БЭМ)

CSS-архитектура Блок-Элемент-Модификатор (БЭМ)

От автора: БЭМ или Блок-Элемент-Модификатор – это методология, система именования, а также набор инструментов. БЭМ создана в Яндексе и предназначена для быстрой разработки в крупных командах. В этом разделе мы остановимся на концепции и системе именования.

Методология БЭМ позволяет дизайнерам представлять сайты в виде коллекции повторно используемых блоков-компонентов, которые можно использовать в паре и создавать интерфейсы. Блок – это просто секция документа, например, хедер, футер или слайдер, как показано на Рисунке 2.3. Скорее всего, под словом «блок» здесь понимаются HTML-сегменты, из которых сделана страница или приложение.

CSS-архитектура Блок-Элемент-Модификатор (БЭМ)

Рисунок 2.3. у домашней страницы может быть хедер, главный блок и футер

Внутри блоков могут быть другие блоки. Например, в хедере может быть логотип, меню и форма поиска (см. Рисунок 2.4.). В блоке футера может быть блок карты сайта.

CSS-архитектура Блок-Элемент-Модификатор (БЭМ)

Рисунок 2.4. блок хедера, внутри которого блоки логотипа, меню и поиска

Элемент – более детальная структура. Из документации БЭМ: «Составная часть блока, которая не может использоваться в отрыве от него.»

Например, в блоке поисковой формы есть текстовый инпут и кнопка, как показано на Рисунке 2.5. Под словом «элемент» понимается элемент с точки зрения дизайна, а не HTML.

CSS-архитектура Блок-Элемент-Модификатор (БЭМ)

Рисунок 2.5. блок поиска с текстовым инпутом и кнопкой

Блок основного контента может хранить в себе блок со списком статей. Блок со списком статей может содержать набор блоков с кратким текстом статей. А в каждом блоке с промо статьи может быть изображение, краткий текст и ссылка «подробно», как показано на Рисунке 2.6.

CSS-архитектура Блок-Элемент-Модификатор (БЭМ)

Рисунок 2.6. блок с кратким описанием статьи

Вместе блоки и элементы образуют основу системы именования БЭМ. По правилам БЭМ:

Имена блоков в проекте должны быть уникальными.

Имена элементов в блоке должны быть уникальными.

Вариации блоков (например, блок поиска с темным фоном) должны создавать путем добавления модификатора в класс.

Имена блоков и элементов разделяются двойным нижним подчеркиванием (.block__element). Имена блоков и элементов отделяются от модификаторов двойным тире (например, block—modifier или .block__element—modifier).

Пример использования БЭМ в форме поиска:

<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>

Вариант этой формы с темным фоном:

<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 будет таким:

.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

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree