Как именовать по бэм?

Question

[FavnAristotel]

Допустим в макете есть три блока с карточками как на картинке
Код для последней секции на фото .

<section class="team">
            <div class="container">
                <div class="team__text">
                    <div class="team__title"></div>
                    <div class="team__sup-title"></div>
                </div>
                <div class="team-cards">
                    <div class="team-cards__item item">
                          <img src="" alt="">
                          <div class="item__title"></div>
                          <div class="item__occupation"></div>
                          <div class="icons-wrap">
                            <img src="" alt="" class="team-icon">
                            <img src="" alt="" class="team-icon">
                            <img src="" alt="" class="team-icon">
                            <img src="" alt="" class="team-icon">
                          </div>
                    </div>
                </div>
            </div>
        </section>

Но если задать team-cards__item еще и класс item то ведь в других карточках тоже будет item__title точнее в первой
и тогда получается что нужно добавлять модификатор к третьей что бы задать размер шрифта и толщину ? мне почему то кажется что это не очень правильно .А как бы вы сверстали эти три блока с карточками? И правильно ли назвать обертку для иконок wrap-icons и иконки team-icons?

Comments

[Антон Горецкий]

<section class="team">
    <div class="container">
        <div class="team__text">
            <div class="team__title"></div>
            <div class="team__sup-title"></div>
        </div>
        <div class="team__cards">
            <div class="team__card team__card--type">
                <img src="" alt="">
                <div class="team__name"></div>
                <div class="team__position"></div>
                <div class="team__socials">
                    <img src="" alt="" class="team__icon">
                    <img src="" alt="" class="team__icon">
                    <img src="" alt="" class="team__icon">
                    <img src="" alt="" class="team__icon">
                </div>
            </div>
        </div>
    </div>
</section>

[FavnAristotel]

Антон Горецкий, а зачем team__card--type нужен?

[Антон Горецкий]

Pove, вместо item модификатор

[Ankhena]

Как-то так

Можно выделить в блоки заголовки, подзаголовки и т.д. и им давать модификаторы. Либо плясать от секций.
Почитайте в спеке про уровни переопределения.

<section class="team">
    <div class="container">
      <header class="team__header"> <!-- не ясно зачем вообще эта обертка -->
        <h2 class="team__title"></h2>
        <h3 class="team__subtitle"></h3>
      </header>
      <ul class="team__list">
        <li class="team__item"> <!-- Можно выделить в блок, если зачем-то нужно -->
          <img class="team__image" src="" alt=""> <!-- наверное с оберткой будет -->
          <h4 class="item__title"></h4>
          <p class="item__position"></p>
          <ul class="team__social social">
            <li class="social__item">
              <a href="" class="social__link">
                <span class="visually-hidden">Наш аккаунт в Instagram</span>
              </a>
            </li>
            <li class="social__item">
              <a href="" class="social__link">
                <span class="visually-hidden">Наш аккаунт в Instagram</span>
              </a>
            </li>
            <li class="social__item">
              <a href="" class="social__link">
                <span class="visually-hidden">Наш аккаунт в Instagram</span>
              </a>
            </li>
            <li class="social__item">
              <a href="" class="social__link">
                <span class="visually-hidden">Наш аккаунт в Instagram</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </section>

Answer 1

[Александр Сафронов]

На самом деле, во всех рядах разные карточки по смыслу, а значит и называть их лучше по смыслу.
Например: service-description-card, service-offer-card, team-card. И для каждой карточки уже применять свои стили.
Если вы icons-wrap собираетесь использовать в разных местах с такими же стилями, то в блоке есть смысл. Иначе достаточно этот узел сделать просто элементом team-card__social-icons.
Вместо team-icon я бы назвал social-icon, т. к. такие ссылки-иконки на соц. ресурсы обычно на сайте могут быть в нескольких местах.