BEM：嵌套块，最好的方法是什么？答案

【问题标题】：BEM: Nested Blocks, what is the best approach?BEM：嵌套块，最好的方法是什么？
【发布时间】：2017-02-02 12:34:12
【问题描述】：

在以下标记中，最佳 BEM 方法是什么？

这个？：

<footer role="footer">
  <footer class="footer__inner">
    <div class="footer__left">© Some text</div>
    <div class="footer__right">Some text</div>
  </footer>
</footer>

或者这个？：

<footer role="footer">
  <footer class="footer__inner">
    <div class="footer__inner__footer__left">© Some text</div>
    <div class="footer__inner__footer__right">Some text</div>
  </footer>
</footer>

或者它们都不对，你知道更好的方法吗？

谢谢

【问题讨论】：

标签： bem

【解决方案1】：

您希望拥有干净的可重复使用的块。问问自己，您可能想要重复使用哪个部分。

块的多级嵌套是不受欢迎的。这是有充分理由的。在可重用性的情况下，应该只有一个块作为根引用。从 bem 句法的角度来看，一个块以下的所有内容都只是该块的一个元素。不是子块，不是子元素，只是一个元素。

因此，BEM 并不关心您的 HTML 结构。更多的是块或元素有什么用途的问题。

我无法从您的示例中真正看出嵌套页脚的目的可能是什么，但在我看来，您似乎将外部页脚元素的角色属性视为 BEM 命名的一部分。但事实并非如此。请记住关注点分离的想法。 role="footer" 是 HTML 语义。您不应该将其用作 BEM 命名参考，因为您可能希望有一天更改该 HTML 属性，然后您的 BEM 语义就会化为乌有。

所以，这就是我要做的。

假设您希望外部页脚成为可重用元素，那么您可能希望像这样命名您的类（仅作为示例）：

<footer class="footer" role="footer">
    <footer class="footer__textbox">
        <div class="footer__text footer__text--left"> <!-- left as modifier -->
        <div class="footer__text footer__text--right"> <!-- right as modifier -->
    </footer>
</footer>

现在您可以在页面的任何适当部分使用您的页脚，任何阅读您的代码的人都可以了解这个 css 结构的用途。

【讨论】：

我将第二个页脚放在主页脚中，因为您在示例中也这样做了。

【解决方案2】：

第一个变体对我来说看起来不错。

其次是错误的，因为您不应该在类名中反映 DOM 结构。见https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2

LongHike 建议的标记也不错。

【讨论】：