Что такое BEM и как его использовать в верстке

BEM (БЭМ) — это сокращение от «Блок, Элемент, Модификатор» и является методологией разработки веб-приложений, которая позволяет создавать масштабируемые и структурированные проекты. В основе лежит идея разделения кода на независимые блоки, которые легко можно переиспользовать и комбинировать.

Блоки

Блоки — это базовые компоненты, из которых состоит интерфейс. Они являются независимыми и могут быть переиспользованы в разных местах проекта. Например, кнопка, меню или шапка сайта.

Пример блока:

<div class="button">Нажми меня!</div>

Элементы

Элементы — это составные части блока, которые имеют смысл только в контексте своего блока. Например, элементы кнопки могут включать в себя текст и иконку.

Пример элемента:

<div class="button">
  <span class="button__text">Нажми меня!</span>
  <span class="button__icon">💡</span>
</div>

Модификаторы

Модификаторы позволяют изменять внешний вид или поведение блока или элемента. Они представлены в виде пары ключ-значение и добавляются к классам блока или элемента.

Пример модификатора:

<div class="button button_size_big">
  <span class="button__text">Нажми меня!</span>
  <span class="button__icon">💡</span>
</div>

Здесь мы использовали модификатор size_big для изменения размера кнопки.

Использование BEM в верстке

Для начала определите блоки, элементы и модификаторы, которые будут использоваться в вашем проекте. Затем примените правила именования классов, следуя принципам BEM.

Пример верстки с использованием BEM:

<div class="header">
  <div class="logo"></div>
  <nav class="menu">
    <ul class="menu__list">
      <li class="menu__item">
        <a href="#" class="menu__link">Главная</a>
      </li>
      <li class="menu__item">
        <a href="#" class="menu__link">О нас</a>
      </li>
    </ul>
  </nav>
</div>

Здесь мы создали блоки header, logo и menu, а также элементы menu__list, menu__item и menu__link.

😉 Важно помнить, что BEM не является строгим набором правил, а скорее рекомендацией для организации кода. Вы можете адаптировать его под свои нужды и предпочтения. Главное — сохранять консистентность и четкую структуру проекта.

Надеюсь, данная статья помогла вам разобраться с основами BEM и его применением в верстке. Успехов в обучении!