Именование в БЭМ

Привет! В этой статье мы поговорим о методологии, которая родилась в компании Яндекс, её именуют БЭМ.

Что такое БЭМ ?

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «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{}