БЭМ: список предметов и стиль?

Question

Я новичок в БЭМ и работаю над образцом шаблона:

HTML

 <header class="header">
  <div class="header__branding">
    <h1>Site branding</h1>
  </div>
  <div class="header__menu">
    <nav class="main-menu">
      <ul class="main-menu list">
        <li class="list__item"><a href="" class="list__item-link">link</a></li>
        <li class="list__item"><a href="" class="list__item-link--active">link</a></li>
        <li class="list__item"><a href="" class="list__item-link">link</a></li>
      </ul>
    </nav>
  </div>
</header>

<footer class="footer">
  <div class="footer__links">
    <ul class="???? list">
      <li class="list__item"><a href="" class="list__item-link">link</a></li>
      <li class="list__item"><a href="" class="list__item-link">link</a></li>
      <li class="list__item"><a href="" class="list__item-link">link</a></li>
    </ul>
  </div>
</footer>

CSS

.main-menu .list{
  // styles here
}

.list__item{
  // styles here
}

.list__item-link{
  // styles here
}

.list__item-link--active{
  // styles here
}

Поэтому мои вопросы таковы: как лучше именовать списки и как лучше организовать CSS? Я застрял в нижнем колонтитуле, я добавил???? если кто-то может помочь мне придумать лучшее название для ссылок нижнего колонтитула?

Мне трудно обернуть голову вокруг БЭМ, но я не должен вкладывать больше одного элемента за раз, верно?

Answer 1

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

В этом случае вам больше не нужен класс только в "списке". Как в верхнем, так и в нижнем колонтитуле.

Если вам нужна какая-либо модификация, вы можете использовать что-то вроде: "список-список - шире" или около того. И этот второй класс меняет только ширину элемента.

И еще одно: неверная ссылка list__item-link. Родитель - "list__item", поэтому он должен называться "list__item__link", НО вы также можете назвать его просто "якорь" или "ссылка", и вы сможете повторно использовать их по всему сайту на <a> элементы.