Question

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

<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吗？

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

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

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

Answer 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个问题！ ;）

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

1 个答案: