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

Question

[Капитан Какао]

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

<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>

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


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

Answer 1

[Евгений Им]

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

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

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

Расписываю на примере лого:
Сначала я бы понял, что это блок в системе ценностей БЭМ и именовал класс так "logo" (блок -- самодостаточный элемент).
Допустим, потом мне бы потребовалось на каких-либо страницах сайта флетовое (flat) лого. Получается, что я буду делать модификацию логотипа. Поняв, что это модификатор я бы добавил следующие классы: "logo logo_flat" -- класс блока "logo" и соответственно, класс модификатора "logo_flat"
Далее, если бы мне потребовалось в логотипе разместить текст (название фирмы, слоган и т.п.). То я бы сначала разобрался -- это блок, это элемент или модификатор? Явно не модификатор (никакой CSS-модификации в существующие элементы не добавляется), значит блок или элемент. Согласно БЭМ-методологии, блок -- самодостаточная единица, а элемент не может существовать вне блока. Соответственно, текст внутри лого это элемент. Я бы в блоке лого разместил текст в HTML-элементе и присвоил класс "logo__company-name" (класс элемента включает в себя в качестве префикса название блока. Это связано с тем, что элемент может существовать только в контексте блока)

Comments

[mukzer]

Евгений Им
Не могли бы вы мне подсказать, как правильно назвать классы в данном примере (слайдер)?

Спасибо!

[mukzer]

Евгений Им

<div class="goods-slider">
                                <div class="goodsMainSlider-container">
                                    <div class="goodsMainSlider-wrapper">

                                        <div class="goodsMainSlider__item">
                                            <img class="goodsMainSlider__item-img" src="" alt="">
                                        </div>

                                        <div class="goodsMainSlider__item">
                                            <img class="goodsMainSlider__item-img" src="" alt="">
                                        </div>

                                        <div class="goodsMainSlider__item">
                                            <img class="goodsMainSlider__item-img" src="" alt="">
                                        </div>

                                    </div>
                                </div>
    
                                <div class="goodsSecondSlider-container">
                                    <div class="goodsSecondSlider-wrapper">

                                        <div class="goodsSecondSlider__item">
                                            <img class="goodsSecondSlider__item-img" src="" alt="">
                                        </div>

                                        <div class="goodsSecondSlider__item">
                                            <img class="goodsSecondSlider__item-img" src="" alt="">
                                        </div>

                                        <div class="goodsSecondSlider__item">
                                            <img class="goodsSecondSlider__item-img" src="" alt="">
                                        </div>

                                    </div>
                                </div>
                            </div>

Вот что я написал, но скорее всего не правильно это. Ещё мне кажется слишком большие классы...

Answer 2

[Сергей]

<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>

Comments

[Капитан Какао]

А если у меня такая структура?

<div class="content">
  <div>
    <div>
      <div></div>
    </div>
  </div>
</div>

И всё, что в классе content будет только в нём, то как вложенность называть, так?

<div class="content">
  <div class="content-div">
    <div class="content-div-wrapper">
      <div class="content-div-wrapper-text">text</div>
    </div>
  </div>
</div>

[Сергей]

Rad Cor: Да, если внутри нет блоков. Но лучше называть через камел кейс content-divWrapper content-divWrapperText