БЭМ — соглашение по именованию в CSS

Перевод статьи «BEM – A CSS Naming Convention».

БЭМ это аббревиатура из первых букв слов «блок», «элемент» и «модификатор» (англ. BEM — Block, Element, Modifier ). Это методология создания CSS-кода, пригодного к многократному использованию. БЭМ дает нам шаблон именования компонентов, который делает более очевидными отношения между стилевыми классами компонентов и разметкой. Для примера возьмем компонент навигации на веб-странице. Он может состоять из контейнера nav, списка и элементов списка.

Блоки

Мы используем компонент nav и знаем, что у нас есть контейнер nav, список и элементы списка. Чтобы дать всем этим элементам осмысленные имена, мы можем применить методологию БЭМ.

Структура именования БЭМ придерживается шаблона, в котором блоки это такие именованные вещи как nav, container или header. В рамках веб-страницы (или экрана, если вы работаете с мобильными устройствами) блоки — это элементы верхнего уровня.

Чтобы понять, относится ли какой-то элемент к блокам, нужно подумать, несет ли он смысловую нагрузку сам по себе. Например, элементы nav или button имеют смысл сами по себе. Вы точно знаете, что они из себя представляют, а чтобы это понять, вам не нужен никакой дополнительный контекст. Если вы просматриваете какой-нибудь CSS-файл и видите .nav, вы сразу представляете, что это такое, вам не нужны лишние пояснения. То есть, вы можете сказать, что это за элемент, просто прочитав его название.

Элементы

Элементы именуются с использованием двойного символа подчеркивания, отделяющего название элемента от названия блока. Элементы это часть блока, они не имеют собственного отдельного значения. Хорошим примером, иллюстрирующим это, будет элемент списка.

Элемент li сам по себе ни о чем нам не говорит. К чему он относится? Если в CSS-файле вам попадается li, вы в общем-то понятия не имеете, где этот элемент расположен в разметке и сколько таких элементов на странице будет затронуто, если вы отредактируете этот код.

Но если ваш элемент li называется navList__item, внезапно он обретает смысл. Важно отметить, что в блоке может быть много вложенных элементов, но сами блоки не могут быть вложены внутрь элемента. Это связано с тем фактом, что блоки имеют самостоятельное значение.

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

Модификаторы это самые маленькие юниты в БЭМ. Они используются для описания поведения, состояния, вида элемента. Если говорить об элементах навигации, это могут быть модификаторы цвета или наведения. Имена элементов, написанные в соответствии с БЭМ, могут выглядеть как navList__item--blue или navList__item--hover.

Обратите внимание на два дефиса. В БЭМ они служат для отделения атрибута.

Собираем все воедино

Теперь, когда мы знаем основы соглашения об именовании БЭМ, давайте посмотрим, как может выглядеть код, написанный с учетом этого соглашения. Разберем код компонента навигации на странице. HTML-разметка может выглядеть следующим образом:

<div className="nav">
    <nav className="nav__container">
      <ul className="nav__list">
        <li className="navList__item--blue">I am blue!</li>
        <li className="navList__item--red">I am red!</li>
        <li className="navList__item--hover">I have a hover state!</li>
      </ul>
    </nav>
</div>

Теперь, зная, как выглядит разметка, мы можем спроектировать некоторые CSS-классы. С учетом созданных имен наш CSS может быть следующим:

/* Block */
.nav {
  text-decoration: none;
  background-color: white;
  color: #888;
  border-radius: 5px;
  display: inline-block;
  margin: 10px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 5px;
}

/* Element */
.nav__ul {
  background-color: white;
  color: #fff;
  padding-right: 12px;
  padding-left: 12px;
  margin-right: -10px; /* realign button text padding */
  font-weight: 600;
  background-color: #333;
  opacity: 0.4;
  border-radius: 5px 0 0 5px;
}

/* Modifier */
.nav__li--blue {
  color: blue;
  font-size: 28px;
  padding: 10px;
  font-weight: 400;
}

/* Modifier */
.nav__li--red {
  border-color: #0074d9;
  color: white;
  background-color: #0074d9;
}

/* Modifier */
.nav__li--hover: hover {
  border-color: #ff4136;
  color: white;
  background-color: #ff4136;
}

Представьте, что этот CSS-код был первым, что вы увидели в проекте. Читая его, вам довольно просто понять, что это за классы, и стили каких элементов они задают. Это одно из самых больших преимуществ БЭМ. Соглашение БЭМ позволяет вам проектировать свой код таким образом, чтобы HTML и CSS имели смысл как вместе, так и по отдельности.

Заключение

Имейте в виду, что это не идеальный пример, но он отлично передает суть. Он показывает, как и для чего используется БЭМ.

Конечно, БЭМ — не единственный возможный вариант соглашения об именовании, и он не обязательно подходит всем. Вы и ваша команда можете подобрать (составить) такое соглашение, какое посчитаете наиболее подходящим для своих целей. Главное, чтобы оно помогало писать чистый, читаемый и поддерживаемый код. Когда ваш CSS имеет смысл сам по себе, его гораздо проще отредактировать, потому что вы точно знаете, что именно меняете, и вам не приходится сражаться с кучей каскадных правил.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]