如何使用 BEM 和 SMACCS 命名嵌套元素

Question

我刚开始在我的样式表中使用 BEM 和 SMACCS，但在命名 DOM 中深度嵌套的元素时遇到了一些麻烦。例如，我有一个名为 .main-container 的 div。嵌套在main-container 的第一层内的是一个额外的 div，按照约定命名为.main-container__article。

<div class="main-container>
  <div class="main-container__article></div>
</div>

这就是事情变得令人困惑的地方。在该文章 div 中，假设我有一个标题，后跟一个具有嵌套跨度标签的段落。我是否继续像这样使用main-container__article 预课？

<div class="main-container>
  <div class="main-container__article>
    <h1 class="main-container__article__header">Heading</h1>
    <p class="main-container__article__copy">
      <span class="main-container__article__copy__intro-text>Example text.</span>
    </p>
  </div>
</div>

在命名父/子元素时，兔子洞会走多远？有没有一点你在二级元素处重置并从那里开始？

<div class="main-container>
  <div class="article>
    <h1 class="article__header">Heading</h1>
    <p class="article__text">
      <span class="article__text__intro-text>This is example text.</span> for a paragraph 
    </p>
   </div>
</div>

Answer 1

BEM 命名不应类似于 DOM 结构，否则您将无法在不更改 CSS 的情况下更改标记。

所以对于你的例子，我会这样：

<div class="main-container">
  <div class="article">
    <h1 class="article__header">Heading</h1>
    <p class="article__copy">
      <span class="article__intro-text">Example text.</span>
    </p>
  </div>
</div>

还有一个非常强大的东西叫做 mixes，它可以在同一个 DOM 节点上混合不同的 BEM 实体： 标题 示例文本。

所以现在您可以将 CSS 分别应用于 article 块和 ma​​in-container__article 元素，这在您需要在外部重用 article 时非常有用主容器。

Answer 2

.main-container__article__copy__intro-text

绝对不会帮助您的样式表的可读性和可维护性。

我建议把这些大块分成几个小块。如果你这样做，你可以重用你的样式——在你的例子中，你不能在其他地方使用文章块。

每次您可以封装一个可能在您的应用/网站的多个位置使用的块时，我都会“重置”。