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>

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

由于

Answer 1

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

不满意多层嵌套。这是有充分理由的。在可重用性的情况下，应该只有一个块作为根引用。从bem语法的角度来看，一个块下面的所有内容都只是该块的一个元素。不是子块，不是子元素，而只是元素。

因此，BEM并不关心您的HTML结构。这更像是一个块或一个元素的用途。

我无法从你的例子中看出你的嵌套页脚的用途是什么，但它看起来好像你认为你的外部页脚元素的角色属性是BEM命名的一部分。但事实并非如此。请记住分离关注点的想法。 role =“footer”是HTML语义。您不应该将它用作BEM命名参考，因为您可能希望有一天更改该HTML属性，然后您的BEM语义将会冒烟。

所以，这就是我要做的事。

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

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

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

Answer 2

第一个版本对我来说很好。

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

LongHike的Markup建议也很好。

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

2 个答案: