BEM 和嵌套的概念问题

Question

我正在尝试使一些 HTML/CSS 代码适应 BEM 方法，但看到 HTML 的类我认为我做错了什么。

我有一个带有一些嵌套图标的嵌套 object "footer__social"。按照官方 BEM 页面中常见问题解答的建议，我最终得到了这样的 HTML 代码：

<footer>
  <div class="footer__logo"></div>
  <div class="footer__social">
    <div class="footer__facebook"></div>
    <div class="footer__twitter"></div>
    <div class="footer__pinterest"></div>
    <div class="footer__googleplus"></div>
    <div class="footer__linkedin"></div>
    <div class="footer__youtube"></div>
  </div>
  <p class="footer__copyright">2016 todos los derechos reservados</p>
  <p class="footer__policy">Política de privacidad</p>
  <p class="footer__terms">Términos y condiciones</p>
</footer>

这是常见问题解答的 link：https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2

对我来说，在每个 HTML 标签中都有 "footer__" 感觉真的很奇怪。

我的想法是重命名 "footer__social" 并启动一个 BEM 块，将其重命名为 "social"，并将 children 重命名为 "social__facebook"，等等...但感觉 "social" 块与页脚断开连接（它只出现在那里）。

<footer>
  <div class="footer__logo"></div>
  <div class="social">
    <div class="social__facebook"></div>
    <div class="social__twitter"></div>
    <div class="social__pinterest"></div>
    <div class="social__googleplus"></div>
    <div class="social__linkedin"></div>
    <div class="social__youtube"></div>
  </div>
  <p class="footer__copyright">2016 todos los derechos reservados</p>
  <p class="footer__policy">Política de privacidad</p>
  <p class="footer__terms">Términos y condiciones</p>
</footer>

正确的做法是什么？

谢谢！

Answer 1

你的两个例子都是完全正确的。但是您的第二个示例更加模块化，您的社交组件可以通过这种方式轻松移动到另一个位置。社交组件的样式也应该独立于页脚。

关于标记的其余部分，您可能不需要所有这些类，只需要一个容器，例如：

<div class="footer__info">
    <p>2016 todos los derechos reservados</p>
    <p>Política de privacidad</p>
    <p>Términos y condiciones</p>
</div>

Answer 2

你举的例子都是正确的！

如果不了解有关样式和实现思想的更多上下文，则很难说哪种方法是最好的方法。

如果我们说：

"social" 块与页脚明确连接；
它只会出现并且会出现在那里；
您想强调它与页脚相连。

然后，使用 footer__ 前缀。这对我来说最有意义：

<footer>
  <div class="footer__logo"></div>
  <div class="footer__social">
    <div class="footer__facebook"></div>
    <div class="footer__twitter"></div>
    <div class="footer__pinterest"></div>
    <div class="footer__googleplus"></div>
    <div class="footer__linkedin"></div>
    <div class="footer__youtube"></div>
  </div>
  <p class="footer__copyright">2016 todos los derechos reservados</p>
  <p class="footer__policy">Política de privacidad</p>
  <p class="footer__terms">Términos y condiciones</p>
</footer>

如果您仍然感觉不对，根据我的经验，通常严格遵循 BEM 命名技术并不总是 感觉对。有一些很好的资源指导我完成这个过程，所以我建议您检查以下两个：

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ 哈里·罗伯茨
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ 作者：尼古拉斯·加拉格尔

PS：对于所有这些额外的建议和想法，重要的是要注意：

Whatever the actual notation used, they are all based on the same BEM principles.

BEM 和嵌套的概念问题

Conceptual problems with BEM and nesting

html

css

bem