Привет! В этой статье мы поговорим о методологии, которая родилась в компании Яндекс, её именуют БЭМ.
Что такое БЭМ ?
БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste». БЭМ применяется по разному, кто-то использует только именования, кто-то берет за основу всю методологию себе на вооружение. Мы сегодня поговорим об именовании в БЭМ.
Именование в БЭМ представляет собой определенный метод именования классов, этот метод позволяет:
- Упростить код и его отладку
- Повторно использовать код избегая «Copy-Paste»
- Быстро понять связь между компонентами в разметке и CSS
- Ускорить написание css при использовании css-препроцессоров
Если изобразить класс со всеми тремя сущностями, то он будет выглядеть так: block__element-modifier
Теперь о каждом по подробнее.
Блок
Блок — это самодостаточный независимый компонент страницы, который может быть повторно использован. Вся страница строится из блоков. Блоки могут содержать другие блоки. Классы блоков выглядят обычно и ничем не отличаются от любых других классов: header, navigate, works
<!-- Блок Header -->
<header class="header"></header>
<!-- Блок Nav -->
<nav class="nav"></nav>Елемент
Cоставная часть блока, не может быть использована отдельно от блока. Например, пункт меню не может использоваться вне блока меню, он является его элементом. Класс элемента пишется так: block __ element
<!-- Хорошо -->
<!-- Блок Header -->
<header class="header">
<!-- Элемент logo -->
<img class="header__logo" alt="">
</header>
<!-- Плохо: Элемент logo находится вне своего блока-родителя-->
<!-- Блок Header -->
<header class="header"></header>
<!-- Элемент logo -->
<img class="header__logo" alt="">Модификатор
Модификатор определяет вид, состояние или поведение блока или элемента. Модификаторы не определяют основные стили блока или элемента, они лишь модифицируют (изменяют) его. Класс модификатора пишется так: block__element-modifier. В примере ниже мы изменили внешний вид активного и неактивного пункта меню с помощью модификаторов.
<!-- Блок Nav -->
<nav class="nav">
<ul class="nav__list">
<!-- Хорошо -->
<li class="nav__item nav__item--active"></li>
<li class="nav__item"></li>
<!-- Плохо: модификатор применен без основного класса -->
<li class="nav__item--active"></li>
</ul>
</nav>Таким образом мы напишем стили для этого html.
nav {
&__item{
font-size: 15px;
color: #555;
&--active{
color: red;
border-bottom: 1px solid;
}
}
}Теперь перейдем к примерам. Мне вспоминается время когда я только-только начинал изучать html и css, делал первые макеты и уже в самом начале возникали неудобства при именовании классов. Например, представим структуру блока статей:
<!-- Блок Posts -->
<section class="posts">
<article class="post">
<h2 class="post-title">Post Title</h2>
<div class="post-author">
<h3 class="post-author-name">Name</h3>
<div class="post-author-another-info">
<div class="post-author-tabs">
<div class="post-author-tabs-arrows"></div>
</div>
</div><!-- end info -->
</div><!-- end author -->
</article>
</section>Ладно ладно, я намеренно начал усложнять этот пример и добавлять бессмысленные классы. Вы понимаете проблему? Чем глубже наша верстка, тем сложнее ей управлять, сложнее управлять её классами. Появляются селекторы из 4 слов, а это очень плохо. Я начал всерьез задумываться об этом, когда мой селектор дошел до 5 слов.
Множество начинающих верстальщиков поступают похожим образом. Такое именование классов очень сильно влияет на проект в целом. Вам сложно будет разобраться, если вы на какое-то время отойдете от разработки проекта. Про адаптацию новых разработчиков к таким портянкам я пожалуй говорить не буду 🙂
Рассмотрим ту же структуру, но с применением именования БЭМ:
<!-- Блок Posts -->
<section class="posts">
<article class="posts__item post">
<h2 class="post__title">Post Title</h2>
<div class="post__author post-author">
<h3 class="post-author__name">Name</h3>
<div class="post-author__another-info">
<div class="post-author__tabs">
<div class="post-author__tabs-arrows"> </div>
</div>
</div><!-- end info-->
</div><!-- end author -->
</article>
</section>Так стало гораздо лучше! В этом примере с десяток строк вы может и не увидите видимого удобства, но когда проект будет расти, поверьте, это сэкономит вам кучу времени и нервов.
И да, вы наверное увидели «posts__item post» и подумали «это что, элемент или блок?» — это и элемент и блок, и да, так можно 🙂 Ведь post является элементом блока, но в тоже время в нем могут быть тоже элементы, например заголовок или ссылки на профиль. Такой прием позволяет нам сделать нашу html разметку более гибкой.
CSS совместно с БЭМ
Если мы именуем классы взяв на вооружение БЭМ, это упрощает понимание и ускорение написания css кода:
// c использованием scss-препроцессора
.post{
&__title{}
&__author{}
&__link{}
&__button{}
}Во-первых, нам не нужно каждый раз писать слово «post», мы можем просто поставить знак амперсанда и при компиляции нашего scss он заменится на «post», во-вторых такой код (даже без использования css-препроцессоров) нагляднее показывает нам вложенность элементов html, мы уже из css кода можем понять разметку!
Наш css код на выходе:
.post{}
.post__title{}
.post__author{}
.post__link{}
.post__button{}