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中，我们说我有一个标题后面跟一个嵌套的span标签的段落。我是否继续使用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分别应用于文章块和 main-container__article 元素，这在您需要重复使用文章时非常有用的主容器

Answer 2

.main-container__article__copy__intro-text

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

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

我会＆＃34;重置＆＃34;每次你可以封装一个可能在你的应用程序/网站的几个地方使用的块。

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

2 个答案: