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

Question

在以下标记中，最好的 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>

或 none 个是正确的，你知道更好的方法吗？

谢谢

Answer 1

您想拥有干净的可重用块。问问自己您可能想要重用哪一部分。

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

因此，BEM 不关心您的 HTML 结构。更重要的是块或元素的目的是什么。

我无法从您的示例中真正看出嵌套页脚的用途是什么，但在我看来，您似乎将外部页脚元素的角色属性视为 BEM-naming 的一部分。但事实并非如此。请记住 关注点分离 的想法。 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 结构的用途。

Answer 2

第一个版本对我来说不错。

第二个错误，因为您不应在 class 名称中反映 DOM 结构。参见 https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2

LongHike 推荐的标记也不错。

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

BEM: Nested Blocks, what is the best approach?

bem