Переношу пост @avprinciple из https://github.com/bem/bem-forum-content-en/issues/38 Ниже цитата:

Приветствую!

Как избежать большого кол-ва элементов от 1 блока? Проблема возникает, когда много элементов в блоке, но нужно сохранить зависимость от родительского блока.

  <section class="meet-us">
    <div class="container">
      <h3 class="meet-us__title heading-3">Meet Us</h3>
      <div class="meet-us__items">
        <div class="meet-us__item">
          <img class="meet-us__img" src="img/team-1.jpg" width="269" height="355" alt="Team member">
          <div class="meet-us__info">
            <h5 class="meet-us__name">Kirkorov</h5>
            <p class="meet-us__metier">Babo-pinatel</p>
            <div class="meet-us__social"> <!--  overlay/display:none -->
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#behance"></use>
                </svg>
              </a>
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#facebook"></use>
                </svg>
              </a>
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#twitter"></use>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="meet-us__item">
          <img class="meet-us__img" src="img/team-2.jpg" width="269" height="355" alt="Team member">
          <div class="meet-us__info">
            <h5 class="meet-us__name">Putin</h5>
            <p class="meet-us__metier">reshala</p>
            <div class="meet-us__social">
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#behance"></use>
                </svg>
              </a>
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#facebook"></use>
                </svg>
              </a>
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#twitter"></use>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

Вместо:

<div class="meet-us__item">
и далее...

или внутри него писать новый блок, например card и:

        <div class="card">
          <img class="card__img" src="" alt="">
          <div class="card__info">
            <h5 class="card__name">Nam</h5>
            <p class="card__metier">Profession</p>
            <div class="social card__social">  <!-- Тут ещё один блок social  -->
              <a href="#" class="social__link">
                <svg class="social__icon">
                  <use xlink:href="img/icons.svg#behance"></use>
                </svg>
              </a>
              <a href="#" class="social__link">
                <svg class="social__icon">
                  <use xlink:href="img/icons.svg#facebook"></use>
                </svg>
              </a>
              <a href="#" class="social__link">
                <svg class="social__icon">
                  <use xlink:href="img/icons.svg#twitter"></use>
                </svg>
              </a>
            </div>
          </div>
        </div>

1. Правильно ли я разметил по БЭМ-у в 1 примере?
2. Как мне сохранить зависимость/наследование/связь от родительского блока, то есть meet-us, или если я блок card вставлю внутри meet-us__item, то от него. Добавлять к блоку card второй класс meet-us__card? И как вообще правильно делать?)

Ещё где-то я видел в исходниках какого-то сайта примерно такое:

<div class="block">
  <div class="block__items">
    <div class="block__item">
      <h3 class="block__item-title">BEM</h3>
      <p class="block__item-text">BEM is wow</p>
      <div class="block__item-media">
        <img src="" alt="" class="block__item-img">
      </div>
      <div class="block__item-social">ya.ru</div>
      <div class="block__item-action">More</div>
    </div>
  </div>
</div>

Как вариант?

И видели ли документацию mdl (Material design light)? Пример:

<ul class="demo-list-two mdl-list">
  <li class="mdl-list__item mdl-list__item--two-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Bryan Cranston</span>
      <span class="mdl-list__item-sub-title">62 Episodes</span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <span class="mdl-list__item-secondary-info">Actor</span>
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
    </span>
  </li>
</ul>

Я просто в документации такого рода примера не заметил или пропустил, верно ли так? Вместо mdl-list__avatar, они пишут: mdl-list__item-avatar, и вообще от элемента mdl-list__item, они создают несколько блоков ниже, они так сохраняют связь, логику от имени item, но правильно ли это, или они так интерпретируют BEM под себя? Это хороший пример, когда много блоков/а точнее элементов внутри. Например, в моём первом примере уже есть meet-us__title, я всё от блока meet-us и размечал, элементами, а вдруг внутри meet-us__item у меня завтра появится ещё заголовок, я уже не смогу написать meet-us__title, так как занято, могу конечно написать meet-us__heading, а гугл в (MDL) написал бы meet-us__item-title, они так избегают элемент в элементе - meet-us__item__title, правильно ли будет делать так как они?

Спасибо.

Русская версия форума у меня не работает, ошибка 500, а до этого пост не мог написать, как и на английской версии, поэтому пишу тут.