RadCor
@RadCor
Если мой ответ вам помог, отмечайте его решением.

Как назвать классы по БЭМ?

Есть такая структура:

<div class="block">
      <div class="row">
        <div class="logo"></div>
        <div class="icon1"></div>
        <div class="icon2"></div>
        <div class="btn"></div>
      </div>
    </div>

    <div class="block">
      <div class="row">
        <div class="cell">
          <div class="avatar"></div>
        </div>
        <div class="cell">
          <div class="name">Uername</div>
          <div class="name">Info</div>
        </div>
      </div>  
      <div class="row">
        <div class="cell">
          <div class="btn1"></div>
        </div>
        <div class="cell">
          <div class="btn2"></div>
        </div>
      </div>
      <div class="row">
        <div class="cell">
          <div class="btn3"></div>
        </div>
      </div>
    </div>


Как это выглядит визуально прикрепляю скрин.
6be8a72c436d437e84831a8aca49f581.jpg

Подскажите пожалуйста как правильно назвать классы в соответствии с технологией БЭМ.
Читал про неё много, но не совсем понимаю, особенно когда одно вкладивается в другое и глубина вложения больше 2.
  • Вопрос задан
  • 2096 просмотров
Решения вопроса 2
ImEugene
@ImEugene
Вёрстка+JavaScript
Раз вы читали про БЭМ, то особо вдаваться в теорию не буду и притяну пример за уши и опишу как бы я думал и именовал HTML-элементы на примере логотипа.

Каждый сам выбирает по какой системе понимать: где блок, где элемент, а где модификатор. Как это делают в Яндексе описано в документации по БЭМ, я придержусь этого способа именования

Классы стоит присваивать после того как вы определились: это блок или элемент? А может вообще модификатор.

Расписываю на примере лого:
Сначала я бы понял, что это блок в системе ценностей БЭМ и именовал класс так "logo" (блок -- самодостаточный элемент).
Допустим, потом мне бы потребовалось на каких-либо страницах сайта флетовое (flat) лого. Получается, что я буду делать модификацию логотипа. Поняв, что это модификатор я бы добавил следующие классы: "logo logo_flat" -- класс блока "logo" и соответственно, класс модификатора "logo_flat"
Далее, если бы мне потребовалось в логотипе разместить текст (название фирмы, слоган и т.п.). То я бы сначала разобрался -- это блок, это элемент или модификатор? Явно не модификатор (никакой CSS-модификации в существующие элементы не добавляется), значит блок или элемент. Согласно БЭМ-методологии, блок -- самодостаточная единица, а элемент не может существовать вне блока. Соответственно, текст внутри лого это элемент. Я бы в блоке лого разместил текст в HTML-элементе и присвоил класс "logo__company-name" (класс элемента включает в себя в качестве префикса название блока. Это связано с тем, что элемент может существовать только в контексте блока)
Ответ написан
Sergamers
@Sergamers
front-end
<div class="header"> <!-- Блок шапка -->
  <div class="header-logo"></div>
  <div class="header-information">
    <div class="social">  <!-- Блок соц сетей. Его можно переместить в другое место шаблона -->
      <div class="social-vk"></div>
      <div class="social-f"></div>
      <div class="social-r"></div>
    </div>

    <div class="header-btn"></div>
    <div class="header-btn header-btn--orange"></div> <!-- Изменили цвет кнопки -->
  </div>
</div>

<div class="content">
  <div class="profile"> <!-- блок profile может быть и не в блоке content, но если считаешь, что только в нем, то изменить на content-profile content-avatar и т.д-->
    <div class="profile-avatar"></div>
    <div class="profile-fio"></div>
  </div>

  ....
</div>

<div class="footer">
  ... какая-нибудь разметка
  <div class="social">  <!-- Блок соц сетей. Его можно переместить в другое место шаблона -->
    <div class="social-vk"></div>
    <div class="social-f"></div>
    <div class="social-r"></div>
  </div>
</div>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы