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

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>

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

另外，header 和 content 等嵌套元素呢？他们应该使用名称 dashboard__item__header 吗？

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

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

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

Answer 1

should I really name it dashboard__item ?

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

Should they use the name dashboard__item__header?

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

if I have some elements that should look different because they're inside a dashboard item?

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

PS：您一口气回答了我们常见问题解答中的 3 个问题 post！ ;)

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

How would I name these nested elements using BEM?

html

css

bem