1

我刚开始在我的样式表中使用 BEM 和 SMACCS，但在命名 DOM 中深度嵌套的元素时遇到了一些麻烦。比如说我有一个名为.main-container. 嵌套在第一层的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>
4

2 回答 2

2

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元素，这在您需要在main-container之外重用文章时非常有用。

于 2015-05-04T17:17:27.933 回答
0 
.main-container__article__copy__intro-text

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

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

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

于 2015-05-04T15:39:19.757 回答