BEM
Блок
Логически и функционально независимый компонент страницы, аналог компонента в Web Components. Блок инкапсулирует в себе поведение (JavaScript), шаблоны, стили (CSS) и другие технологии реализации. Независимость блоков обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.
Элемент
Составная часть блока, которая не может использоваться в отрыве от него.
Например, пункт меню вне контекста блока меню не используется, значит является элементом.
Модификатор
Соглашение по именованию
Блок
c-card // блок
__header, __title // элимент
--white // модификатор
Селекторы
В БЭМ не используют селекторы тегов и идентификаторов. Стили блоков и элементов описываются через селекторы классов.
Что делать с "внучатыми" селекторами (и не только)?
Блок
Не использовать задвоенные блоки
<div class="c-card">
<div class="c-card__header">
<!-- Появляется внук… -->
<h2 class="c-card__header__title">Title text here</h2>
</div>
<div class="c-card__body">
<img class="c-card__body__img" src="http://some-img.png" alt="description">
<p class="c-card__body__text">Lorem ipsum dolor sit amet, consectetur</p>
<p class="c-card__body__text">Adipiscing elit.
<a href="/somelink.html" class="c-card__body__text__link">Pellentesque amet</a>
</p>
</div>
</div>Что делать с "внучатыми" селекторами (и не только)?
Блок
Правильное использование
<div class="c-card">
<div class="c-card__header">
<h2 class="c-card__title">Title text here</h2>
</div>
<div class="c-card__body">
<img class="c-card__img" src="http://some-img.png" alt="description">
<p class="c-card__text">Lorem ipsum dolor sit amet, consectetur</p>
<p class="c-card__text">Adipiscing elit.
<a href="/somelink.html" class="c-card__link">Pellentesque amet</a>
</p>
</div>
</div>Какие наименования использовать?
Блок
Как мне называть врапперы (wrappers)?
<ul class="l-grid">
<li class="l-grid__item">
<div class="c-card">
<div class="c-card__header">
[…]
</div>
<div class="c-card__body">
[…]
</div>
</div>
</li>
<li class="l-grid__item">
<div class="c-card">
<div class="c-card__header">
[…]
</div>
<div class="c-card__body">
[…]
</div>
</div>
</li>
</ul>Модификатор или новый компонент?
Можно легко переполнить проект модулями и сделать все в виде компонентов. Я рекомендую начать с модификаторов, если вам покажется, что управление каким-либо компонентным CSS файлом становится слишком сложным, то, возможно, наступило время разделить некоторые модификаторы. Хороший показатель, когда вам приходится сбрасывать все у блока CSS для стилизации нового модификатора — это, как по мне, самое время для создания нового компонента.
Как управлять состояниями?
<!-- хук автономного состояния -->
<div class="c-card is-active">
[…]
</div>
<!-- модификатор БЭМ -->
<div class="c-card c-card--is-active">
[…]
</div>Имеет смысл придерживаться стандартного набора хуков состояния. Крис Пирс собрал хороший список, который я рекомендую посмотреть.
Как вкладывать компоненты?
<div class="c-card">
<div class="c-card__header">
<h2 class="c-card__title">Title text here</h3>
</div>
<div class="c-card__body"><div class="c-card__body">
<p>I would like to buy:</p>
<!-- Намного лучше - модуль разметки -->
<ul class="l-list">
<li class="l-list__item">
<!-- Многоразовый вложенный компонент -->
<div class="c-checkbox">
<input id="option_1" type="checkbox" name="checkbox" class="c-checkbox__input">
<label for="option_1" class="c-checkbox__label">Apples</label>
</div>
</li>
<li class="l-list__item">
<div class="c-checkbox">
<input id="option_2" type="checkbox" name="checkbox" class="c-checkbox__input">
<label for="option_2" class="c-checkbox__label">Pears</label>
</div>
</li>
</ul>
<!-- .l-list -->
</div>
<!-- .c-card__body -->
</div>
<!-- .c-card -->Не появятся ли у компонентов миллион классов?
<button class="c-button c-button--primary c-button--huge is-active">
Click me!
</button>Links
Блок
BEM
By Oleg Rovenskyi
