css - BEM:列出元素和样式？

Question

我是 BEM 的新手，正在处理示例模板:

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？我卡在了页脚，我添加了一个????谁能帮我为页脚链接想一个更好的名字？

我发现很难全神贯注于 BEM，但我不应该一次嵌套多个元素，对吧？

Answer 1

将 BEM 视为可重复使用的组件，可以在现场的不同地方多次放置。

在这种情况下，您只需要“列表”中的任何其他类。在页眉和页脚中。

如果您需要任何修改，您可以使用诸如“list list--wider”之类的东西。而第二类只改变元素的宽度。

还有一个:list__item-link 是错误的。父项是“list__item”，因此应将其命名为“list__item__link”，但您也可以将其命名为“anchor”或“link”，这样您就可以在<a> 上的所有网站上重复使用它们。元素。