如何使用 BEM 命名这些嵌套元素？答案

【问题标题】：How would I name these nested elements using BEM?如何使用 BEM 命名这些嵌套元素？
【发布时间】：2016-10-05 17:06:11
【问题描述】：

所以我有一个这样的页面：

<div class="dashboard">
  <div class="dashboard-item">
    <div class="dashboard-item__header">
        <span class="dashboard-item__header__icon dashboard-item__header__icon--modifier"></span>Header Title
    </div>
    <div class="dashboard-item__content">
        <p class="???"></p>
    </div>
  </div>
</div>

我有一个仪表板，它是我的容器，它可以有不同的项目。然后一个项目有一个标题和一些内容，但该项目将始终在仪表板中。那么，我真的应该将其命名为 dashboard__item 吗？

另外，像标题和内容这样的嵌套元素呢？他们应该使用名称dashboard__item__header 吗？

我读到我们不应该有这样的嵌套名称，但该标题不应该单独存在，仪表板项目也不应该存在。

那么我该如何命名这样的案例呢？

在内容中，如果我有一些应该看起来不同的元素，因为它们位于仪表板项目中？

【问题讨论】：

标签： html css bem

【解决方案1】：

我真的应该将它命名为 dashboard__item 吗？

这取决于。如果仪表板中的所有项目都非常相似且非常简单，那么使用 dashboard 元素就可以了。但如果它们不同或复杂，您可以考虑为每种可能的项目创建单独的块，并可选择将它们与dashboard__item 混合以进行定位（请参阅https://en.bem.info/methodology/faq/#mixes）。

他们应该使用dashboard__item__header这个名称吗？

不，请使用 dashboard__item-header 之类的名称。看 https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2

如果我有一些元素看起来不同，因为它们位于仪表板项目中？

请参阅此答案的第二部分https://en.bem.info/methodology/faq/#why-should-i-avoid-using-nested-selectors

PS：您在一篇文章中回答了我们常见问题解答中的 3 个问题！ ;)

【讨论】：