БЭМ - полный контроль над версткой

Методология БЭМ позволяет более структурировано и гибко верстать независимыми Блоками и в дальнейшем наиболее комфортно поддерживать такую верстку

Впервые, узнав о БЭМ, показалось, что это только усложняет верстку, но углубившись в методологию и применив ее в проектах, приходит понимание, что БЭМ действительно то, чего не хватало для более комфортной верстки

Подписаться на Telegram-канал блога

Что такое БЭМ

Методологию БЭМ разработала компания Яндекс и кратко описывает ее так

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

Подробнее можно почитать на официальном сайте - https://ru.bem.info/

В статье постараюсь показать применение методологии БЭМ больше с практической стороны

В начале определимся, что из себя представляют Блок, Элемент и Модификатор. Все это - обычные классы для тегов, но написанные по определенным правилам

Рассмотрим простой макет

'1'

Посмотрите верстку на Codepen

Блок

Блок - основа верстки по БЭМ. Блок не зависит от других Блоков, может содержать Элементы и другие Блоки, и может быть использован неоднократно

Сначала посмотрим основы БЭМ на примере заголовка <div class="title"></div>

'3'

На макете у секций Popular и Catalog есть соответствующие заголовки

Так как заголовок будет использоваться несколько раз, то сделаем его отдельным Блоком по БЭМ

<div class="title"></div>

Блоки в БЭМ должны быть независимыми от других Блоков, то есть для Блоков не задают свойств, которые как-либо могут повлиять на другие Блоки, например, внешние отступы margin

Описываем основные стили для Блока <div class="title"></div> с учетом того, что внешние отступы margin не должны присутствовать в свойствах этого Блока

/* Блок title */
.title {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}

Так как Блоки по БЭМ могут содержать в себе другие Блоки, создадим новый Блок для секции Popular - <section class="popular"></section>, и добавим в него уже созданный Блок <div class="title"></div>

<section class="popular">
  <div class="title">Popular</div>
</section>

Теперь Блок <div class="title">Popular</div> находится внутри Блока <section class="popular"></section>, но по прежнему остается независимым Блоком и не является Элементом для Блока <section class="popular"></section>

Чтобы Блок <div class="title"></div> стал Элементом для Блока <section class="popular"></section>, необходимо Блоку <div class="title"></div> добавить класс Элемента

Элемент

Класс Элемента состоит из названия Блока и названия Элемента через два нижних подчеркивания - __, например, popular__title

Элементы могут содержать другие Элементы, но не должны быть частью другого Элемента

Элемент может быть только частью Блока

Неправильная структура

<div class="popular">
  <div class="popular__cards">
    <div class="popular__cards__card"> /* Неверно */
      ...
    </div>
  </div>
</div>

Правильная структура

<div class="popular">
  <div class="popular__cards">
    <div class="popular__card"> /* Верно */
      ...
    </div>
  </div>
</div>

Добавляем Блоку <div class="title"></div> класс Элемента - popular__title

<section class="popular">
  <div class="popular__title title">Popular</div>
</section>

Теперь Блок <div class="popular__title title">Popular</div> является Элементом родительского Блока <section class="popular"></section>

Элемент по БЭМ обязательно должен использоваться только внутри родительского Блока, для которого он был создан, и не может использоваться вне его

Элементу мы уже можем добавлять внешние отступы margin, так как Элемент <div class="popular__title title">Popular</div> вне родительского Блока <section class="popular"></section> использоваться не будет, и может взаимодействовать с другими Элементами

/* Блок title */
.title {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}
/* Элемент popular__title */
.popular__title {
  margin-bottom: 30px;
}

Теперь для Блока <div class="popular__title title">Popular</div> будут также применены свойства Элемента

Аналогичным образом сделаем Блок <div class="title">Catalog</div> Элементом для Блока <section class="catalog"></section>

<section class="popular">
  <div class="popular__title title">Popular</div>
</section>
<section class="catalog">
  <div class="catalog__title title">Catalog</div>
</section>

Заголовку Catalog также добавим отступ снизу через класс Элемента catalog__title

/* Блок title */
.title {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}
/* Элемент popular__title */
.popular__title {
  margin-bottom: 30px;
}
/* Элемент catalog__title */
.catalog__title {
  margin-bottom: 60px;
}

Промежуточный итог для понимания:

Блок <div class="title"></div> мы можем использовать неоднократно в любой секции, в любом месте верстки, так как он имеет только стили, отвечающие за отображение. У него нет внешних отступов margin, которые могли бы помешать использовать его в другом месте верстки. Блок имеет начальные стили и может использоваться без родительского Блока.

Но для того, чтобы Блок стал Элементом другого родительского Блока, мы добавляем класс Элемента состоящего из названия родительского Блока и названия Элемента через два нижних подчеркивания __ - popular__title. Теперь блок <div class="popular__title title">Popular</div> становится Элементом родительского Блока <section class="popular"></section> и больше не может использоваться вне этого Блока, так как теперь имеет внешние отступы margin.

В то же время, мы можем добавлять дополнительные стили для Блока <div class="popular__title title">Popular</div> через класс Элемента popular__title, если эти стили будут необходимы только в пределах родительского Блока <section class="popular"></section>

Если же дополнительные стили для Блока <div class="title"></div> будут применяться неоднократно, и не только в определенном родительском Блоке, то для этого применяются дополнительные классы - Модификаторы

Модификатор

Название Модификатора записывается через одно нижнее подчеркивание после названия класса Блока или названия класса Элемента - _, например title_large для Блока <div class="title"></div> или popular__title_large для Элемента <div class="popular__title title"></div>

На макете в секции <section class="catalog"></section> Блок заголовка <div class="title">Catalog</div> имеет другой цвет и другой размер шрифта.

'4'

Так как эти стили мы планируем применять не только в этой секции, то сделаем отдельные классы Модификаторов, которые можно будет использовать неоднократно

Итак, есть Блок заголовка <div class="title">Catalog</div> со стилями по-умолчанию

/* Блок title */
.title {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}

Мы хотим изменить цвет заголовка не везде сразу, а локально, к примеру, как на макете, заголовку Catalog секции <section class="catalog"></section>

Добавляем Блоку <div class="title">Catalog</div> класс Модификатора - title_blue и получаем

<div class="title title_blue">Catalog</div>

Добавляем стили для класса Модификатора

/* Модификатор title_blue для Блока title */
.title_blue {
  color: #4a60d7;
}

В итоге получаем заголовок со стилями по-умолчанию и стилями добавленными через класс Модификатора

Модификаторы можно совмещать, то есть использовать несколько разных Модификаторов одновременно для одного и того же Блока или Элемента

Добавим еще Модификатор title_large для заголовка, который будет добавлять стиль с другим размером шрифта

<div class="title title_blue title_large">Catalog</div>

/* Модификатор title_blue для Блока title */
.title_blue {
  color: #4a60d7;
}
/* Модификатор title_large для Блока title */
.title_large {
  font-size: 48px;
}

Модификаторы можно создавать и для Элементов, синтаксически это будет выглядеть так - catalog__title_small, если мы точно уверены, что такой Модификатор будет использоваться только для Элемента <div class="catalog__title title">Catalog</div> и только в родительском блоке <section class="catalog"></section>

Важно понимать, что Модификаторы нельзя использоваться отдельно от Блока или Элемента, для которого создан этот Модификатор

Получаем следующий код

<section class="popular">
  <div class="popular__title title">Popular</div>
</section>
<section class="catalog">
  <div class="catalog__title title title_blue title_large">Catalog</div>
</section>


.title {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}
/* Модификатор title_blue для Блока title */
.title_blue {
  color: #4a60d7;
}
/* Модификатор title_large для Блока title */
.title_large {
  font-size: 48px;
}
/* Элемент popular__title */
.popular__title {
  margin-bottom: 30px;
}
/* Элемент catalog__title */
.catalog__title {
  margin-bottom: 60px;
}

Если в дальнейшем появятся другие секции, где необходим будет заголовок синего цвета, то добавим ему Модификатор title_blue или понадобится заголовок большего размера, добавим Модификатор title_large

<section class="about">
  <div class="about__title title title_blue">About</div>
</section>
<section class="subscribe">
  <div class="subscribe__title title title_large">Subscribe</div>
</section>

Практика

'1'

Посмотрим на макет еще раз, и выделим Блоки, которые используются неоднократно

Блок с логотипом в <header class="header"></header> и в <footer class="footer"></footer>
Блок с телефоном в <header class="header"></header> и в <footer class="footer"></footer>
Блок заголовка в <section class="popular"></section> и в <section class="catalog"></section>
Блок карточки с изображением, названием, текстом и кнопкой <div class="card"></div>
Блок кнопки <div class="button"></div> - ее выделим тоже в отдельный Блок, так как предполагаем ее использование вне карточек

Общие Блоки <div class="logo"></div> и <div class="phone"></div> используются и в <header class="header"></header> и в <footer class="footer"></footer>

Так как Блоки <div class="logo"></div> и <div class="phone"></div> больше нигде использоваться не будут, то дополнительные стили для них в <footer class="footer"></footer> задаем через классы Элементов

<!-- Header -->
<header class="header">
  <div class="container">
    <div class="header__flex">
      <div class="header__logo logo"><a href="">Logo</a></div>
      <div class="header__phone phone"><a href="">8(800)000-00-00</a></div>
    </div>
  </div>
</header>

<!-- Footer -->
<footer class="footer">
  <div class="container">
    <div class="footer__flex">
      <div class="footer__logo logo"><a href="">Logo</a></div>
      <div class="footer__phone phone"><a href="">8(800)000-00-00</a></div>
    </div>
  </div>
</footer>

/* Блок header */
.header {
  padding: 30px 0;
  background: #4a60d7;
}

/* Элемент header__flex */
.header__flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Блок logo */
.logo a {
  font-size: 36px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* Блок phone */
.phone {
  position: relative;
}
.phone:after {
  content: '';
  width: 0%;
  height: 6px;
  background: #40ffdc;
  display: block;
  transition: all 0.6s ease;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
}
.phone:hover:after {
  width: 100%;
}
.phone a {
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}
/* Элемент footer__logo */
.footer__logo a {
  color: #4a60d7;
}
/* Элемент footer__phone */
.footer__phone a {
  color: #4a60d7;
}

То есть, создаем Блок <div class="logo"></div> один раз и используем его два раза, но так как у <footer class="footer"></footer> отличается фон, то при помощи класса Элемента footer__logo Блоку <div class="logo"></div> назначаем другой цвет

Тоже самое и с Блоком <div class="phone"></div>

Верстаем Popular и Catalog

<section class="popular">
  <div class="container">
    <div class="popular__title title">Popular</div>
    <div class="popular__flex">
      <div class="popular__row">
        <div class="popular__col">
          <div class="popular__card card">
            <div class="card__image"><img src="https://picsum.photos/1920/1080" alt=""/></div>
            <div class="card__body">
              <div class="card__title">Popular One</div>
              <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, maiores.</div>
              <div class="card__button button"><a href="">Buy</a></div>
            </div>
          </div>
        </div>
        <div class="popular__col">
          <div class="popular__card card">
            <div class="card__image"><img src="https://picsum.photos/1920/1081" alt=""/></div>
            <div class="card__body">
              <div class="card__title">Popular Two</div>
              <div class="card__text">Consectetur adipisicing elit. Aspernatur, maiores.</div>
              <div class="card__button button"><a href="">Buy</a></div>
            </div>
          </div>
        </div>
        <div class="popular__col">
          <div class="popular__card card">
            <div class="card__image"><img src="https://picsum.photos/1920/1082" alt=""/></div>
            <div class="card__body">
              <div class="card__title">Popular Three</div>
              <div class="card__text">Consectetur adipisicing elit</div>
              <div class="card__button button"><a href="">Buy</a></div>
            </div>
          </div>
        </div>
        <div class="popular__col">
          <div class="popular__card card">
            <div class="card__image"><img src="https://picsum.photos/1920/1083" alt=""/></div>
            <div class="card__body">
              <div class="card__title">Popular Four</div>
              <div class="card__text">Aspernatur, maiores. Lorem ipsum dolor.</div>
              <div class="card__button button"><a href="">Buy</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="catalog">
  <div class="container">
    <div class="catalog__title title title_blue title_large">Catalog</div>
    <div class="catalog__flex">
      <div class="catalog__row">
        <div class="catalog__col">
          <div class="catalog__card card">
            <div class="card__image"><img src="https://picsum.photos/1921/1080" alt=""/></div>
            <div class="card__body card__body_white card__body_shrink">
              <div class="card__title">Catalog One</div>
              <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, maiores.</div>
              <div class="card__button button"><a href="">Buy</a></div>
            </div>
          </div>
        </div>
        <div class="catalog__col">
          <div class="catalog__card card">
            <div class="card__image card__image_large card__image_radius"><img src="https://picsum.photos/1922/1081" alt=""/></div>
            <div class="card__body card__body_white">
              <div class="card__title card__title_large">Catalog Two</div>
              <div class="card__text card__text_large">Consectetur adipisicing elit. Aspernatur, maiores.</div>
              <div class="card__button button button_large button_gray"><a href="">Buy</a></div>
            </div>
          </div>
        </div>
        <div class="catalog__col">
          <div class="catalog__card card">
            <div class="card__image"><img src="https://picsum.photos/1923/1082" alt=""/></div>
            <div class="card__body card__body_white card__body_shrink">
              <div class="card__title">Catalog Three</div>
              <div class="card__text">Consectetur adipisicing elit</div>
              <div class="card__button button"><a href="">Buy</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Следите, чтобы в CSS-файле класс Модификатора, всегда был расположен ниже класса Блока и класса Элемента, чтобы у стилей Модификатора приоритет был выше

/* Блок popular */
.popular {
  padding: 60px 0;
}
/* Элемент popular__title */
.popular__title {
  margin-bottom: 30px;
}
/* Элемент popular__row */
.popular__row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px -30px;
}
/* Элемент popular__col */
.popular__col {
  width: 25%;
  padding: 0 15px 30px;
}

/* Блок title */
.title {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}
/* Модификатор title_blue для Блока title */
.title_blue {
  color: #4a60d7;
}
/* Модификатор title_large для Блока title */
.title_large {
  font-size: 48px;
}

/* Блок card */
.card {
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Элемент card__image */
.card__image {
  height: 200px;
  overflow: hidden;
  width: 100%;
}
.card__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
/* Модификатор card__image_large для Блока card__image */
.card__image_large {
  height: 250px;
}
/* Модификатор card__image_radius для Блока card__image */
.card__image_radius {
  border-radius: 15px;
}
/* Элемент card__body */
.card__body {
  padding: 15px;
  flex: 1;
  background: #f1f1f1;
  display: flex;
  flex-direction: column;
}
/* Модификатор card__body_white для Блока card__body */
.card__body_white {
  background: #fff;
}
/* Модификатор .card__body_shrink для Блока card__body */
.card__body_shrink {
  flex: 0;
}
/* Элемент card__title */
.card__title {
  font-size: 24px;
  text-align: center;
  margin-bottom: 15px;
}
/* Модификатор card__title_large для Элемента card__title */
.card__title_large {
  font-size: 30px;
}
/* Элемент card__title */
.card__text {
  text-align: center;
  font-size: 16px;
  flex: 1;
  margin-bottom: 15px;
  font-weight: 300;
}
/* Модификатор card__text_large для Элемента card__text */
.card__text_large {
  font-size: 18px;
}

/* Блок button */
.button {
  text-align: center;
}
.button a {
  display: inline-flex;
  padding: 0 15px;
  background: #4a60d7;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 40px;
  width: 100px;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.6s ease;
}
.button a:hover {
  background: #40ffdc;
}
/* Модификатор button_large для Блока button */
.button_large a {
  width: 150px;
  height: 50px;
  font-size: 22px;
}
/* Модификатор button_gray для Блока button */
.button_gray a {
  background: #333;
}

/* Блок catalog */
.catalog {
  background: #f1f1f1;
  padding: 60px 0;
}
/* Элемент catalog__title */
.catalog__title {
  margin-bottom: 60px;
}
/* Элемент catalog__row */
.catalog__row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px -30px;
}
/* Элемент catalog__col */
.catalog__col {
  width: 33.33333333%;
  padding: 0 15px 30px;
}

Средняя карточка в секции Catalog значительно отличается от остальных карточек. Вместо того, чтобы придумывать новый класс этой карточке, копировать часть свойств и добавлять новые, просто добавим Модификаторы для отличающихся Элементов карточки, при этом основа карточки будет такой же, как и у остальных

Если в дальнейшем захотим создать карточку только с увеличенным изображением, аналогично добавим лишь один, уже существующий Модификатор, а остальные Элементы карточки оставим неизменными

Более сложная структура

В простых макетах обычно для именования Блока, Элемента или Модификатора хватает одного слова, но в более сложных макетах есть блоки со сложной вложенной структурой

Поэтому Блоки, Элементы и Модификаторы могут иметь более сложные названия - их можно записывать через дефис - -

Использовать такие более сложные названия нужно грамотно, чтобы не получалось такой структуры

Пример плохой структуры

<div class="popular-gray">
  <div class="popular-gray__title-second popular-gray__title-second_left-blue">
    Popular Gray
  </div>
</div>

/* Блок popular-gray */
.popular-gray {
  padding: 60px 0;
  background: #efefef;
}
/* Элемент popular-gray__title-second */
.popular-gray__title-second {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}
/* Модификатор popular-gray__title-second_left-blue для Элемента popular-gray__title-second */
.popular-gray__title-second_left-blue {
  text-align: left;
  color: blue;
}

Такая структура не имеет смысла - слишком усложненная и не универсальная. Лучше внимательней продумать структуру такого Блока, упростить и вынести в отдельные Блоки, Элементы, Модификаторы

Пример хорошей структуры

<div class="popular popular_gray">
  <div class="popular__title title title_second title_left title_blue">
    Popular Gray
  </div>
</div>

/* Блок popular */
.popular {
  padding: 60px 0;
}
/* Модификатор popular_gray для Блока popular */
.popular_gray {
  background: #efefef;
}
/* Элемент popular__title */
.popular__title {
  margin-bottom: 30px;
}
/* Блок title */
.title {
  font-size: 36px;
  color: #333;
  text-align: center;
}
/* Модификатор title_second для Блока title */
.title_second {
  font-size: 24px;
}
/* Модификатор title_left для Блока title */
.title_left {
  text-align: left;
}
/* Модификатор title_blue для Блока title */
.title_blue {
  color: blue;
}

Такая структура намного более читаема, гибка, и логична.

Рассмотрим пример с более сложной структурой

Ниже макет с корзиной товаров

'8'

Сложность данного макета в том, что здесь есть блоки с аналогичным содержимым, например, есть количество товаров в карточке и общее количество товаров ниже. Есть стоимость товара в карточке и есть общая стоимость всех товаров, а также в карточке есть цена со скидкой и цена без скидки

Как и ранее, просто необходимо выделить отдельные блоки

Есть основной Блок cart, значит все его дочерние Элементы будут именоваться через два нижних подчеркивания - cart__title, cart__cards, cart__card, cart__cost и так далее
Замечаем, что Элемент cart__card имеет свою структуру и так же, как и Блок cart имеет Элемент цены. Второй Элемент cart__cost внутри карточки мы не можем создать, так как он уже используется для Элемента общей цены, поэтому карточку корзины товаров выделяем в отдельный Блок cart-card, который будет использоваться только в секции корзины товаров и его Элемент цены будет называться cart-card__cost. Заметьте, что карточку корзины мы не можем выделить в Блок card, так как card у нас уже используется в Блоках Popular и Catalog
Также видим, что в карточке есть два вида цены - без скидки и со скидкой. В данном случае есть два варианта: либо выделить Элемент в отдельный Блок cart-card-cost и сделать Элементы cart-card-cost__old и cart-card-cost__current, но его структура не настолько сложна, чтобы выделять цену карточки в отдельный Блок. Поэтому сделаем их Элементами Блока cart-card, и назовем их cart-card__cost-old и cart-card__cost-current, таким образом они будут элементами карточки, но мы также понимаем, что эти классы относятся именно к цене

<section class="cart">
  <div class="container">
    <div class="cart__title title">Cart</div>
    <div class="cart__cards">
      <div class="cart__card cart-card">
        <div class="cart-card__image"><img src="https://picsum.photos/1920/1080" alt=""/></div>
        <div class="cart-card__body">
          <div class="cart-card__title"><a href="">Lorem ipsum dolor.</a></div>
          <div class="cart-card__cost">
            <div class="cart-card__cost-old">699 $</div>
            <div class="cart-card__cost-current">499 $</div>
          </div>
          <div class="cart-card__quantity">2</div>
          <div class="cart-card__delete"><a href="">Delete</a></div>
        </div>
      </div>
      <div class="cart__card cart-card">
        <div class="cart-card__image"><img src="https://picsum.photos/1920/1081" alt=""/></div>
        <div class="cart-card__body">
          <div class="cart-card__title"><a href="">Ipsum dolor sit amet.</a></div>
          <div class="cart-card__cost">
            <div class="cart-card__cost-old">799 $</div>
            <div class="cart-card__cost-current">599 $</div>
          </div>
          <div class="cart-card__quantity">3</div>
          <div class="cart-card__delete"><a href="">Delete</a></div>
        </div>
      </div>
      <div class="cart__card cart-card">
        <div class="cart-card__image"><img src="https://picsum.photos/1920/1082" alt=""/></div>
        <div class="cart-card__body">
          <div class="cart-card__title"><a href="">Assumenda, nemo.</a></div>
          <div class="cart-card__cost">
            <div class="cart-card__cost-old">499 $</div>
            <div class="cart-card__cost-current">399 $</div>
          </div>
          <div class="cart-card__quantity">8</div>
          <div class="cart-card__delete"><a href="">Delete</a></div>
        </div>
      </div>
    </div>
    <div class="cart__body">
      <div class="cart__quantity">Quantity: <span>13</span></div>
      <div class="cart__cost">Cost: <span>1497 $</span></div>
      <div class="cart__button button"><a href="">Submit</a></div>
    </div>
  </div>
</section>

/* Блок card */
.cart {
  padding: 60px 0;
}
/* Элемент cart__title */
.cart__title {
  margin-bottom: 60px;
}
/* Элемент cart__cards */
.cart__cards {
  margin-bottom: 60px;
}
.cart__card:not(:last-child) {
  margin-bottom: 30px;
}
/* Элемент cart__body */
.cart__body {
  text-align: center;
}
/* Элемент cart__body */
.cart__quantity {
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 300;
}
.cart__quantity span {
  font-size: 24px;
  font-weight: 700;
}
/* Элемент cart__cost */
.cart__cost {
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 300;
}
.cart__cost span {
  font-size: 24px;
  font-weight: 700;
}
/* Элемент cart__button */
.cart__button a {
  font-size: 24px;
  width: auto;
  padding: 0 60px;
  height: 60px;
}
/* Блок cart-card */
.cart-card {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
}
/* Элемент cart-card__image */
.cart-card__image {
  width: 200px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 30px;
}
.cart-card__image img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
/* Элемент cart-card__body */
.cart-card__body {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 30px 0;
}
/* Элемент cart-card__title */
.cart-card__title {
  flex: 1;
}
.cart-card__title a {
  font-size: 18px;
  font-weight: 300;
  text-decoration: none;
  color: #000;
  transition: all 0.6s ease;
}
.cart-card__title a:hover {
  color: #4a60d7;
}
/* Элемент cart-card__cost */
.cart-card__cost {
  width: 100px;
  flex-shrink: 0;
  text-align: center;
}
/* Элемент cart-card__cost-old */
.cart-card__cost-old {
  text-decoration: line-through;
  font-size: 14px;
}
/* Элемент cart-card__cost-current */
.cart-card__cost-current {
  font-size: 18px;
  color: #4a60d7;
}
/* Элемент cart-card__quantity */
.cart-card__quantity {
  width: 100px;
  flex-shrink: 0;
  text-align: center;
}
/* Элемент cart-card__delete */
.cart-card__delete {
  text-align: center;
  width: 100px;
  flex-shrink: 0;
}
.cart-card__delete a {
  color: #4a60d7;
  text-decoration: none;
}

Послесловие

Когда я знакомился с БЭМ по документации, статьям, даже по видео на Youtube, общей картины у меня не складывалось за недостатком практики, и я не применял БЭМ, так как до конца не понимал всей идеи.

Первый проект, который я попытался сверстать по БЭМ, занял у меня на порядок больше времени, и получился не совсем корректен, но в голове все потихоньку раскладывалось по полочкам, и сейчас все проекты верстаю только по БЭМ

Верстка получается структурированой, гибкой, понятной, в нее легко вносить изменения, проще делать адаптивность, проще давать названия классам и чувствуешь, что получаешь больше контроля над версткой

В этой статье я постарался показать, как ко мне приходило понимание БЭМ, может кому-то такой подход окажется понятнее, чем другие

Рекомендую в свободное время сверстать любой макет по БЭМ, на практике становится все намного понятней

Все частные случаи применения БЭМ невозможно охватить одной статьей, но я постарался уместить максимум базовой информации в этих примерах

Очень надеюсь, что статья будет полезна, и вы также осознаете все преимущества верстки по методологии БЭМ

Полезные ссылки

Методология БЭМ - Быстрый старт

Поддержать

Выбор диапазона значений на основе плагина noUiSlider

В статье рассмотрим один из вариантов, как сделать выбор диапазона значений, который обычно используется в фильтрах интернет-магазинов

31/10/2021

Создаём графики на основе плагина Chart.js (обновлено 17.08.2021)

В данной статье рассмотрим вариант создания графиков на основе плагина Charts.js

11/08/2021

Постепенное изменение числа до целевого значения

В этой статье разберём частый кейс при вёрстке - постепенное/плавное увеличение числа от некоторого значения до целевого

14/07/2021