Question

我正在尝试将一些HTML / CSS代码改编为BEM方法，但是看到HTML的类我认为我做错了。

我有一个嵌套对象“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>

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

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

我的想法是重命名“footer__social”并开始将BEM块重命名为“social”，并将其子项重命名为“social__facebook”等等，但感觉“社交”块与页脚（它只出现在那里）。

<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

你的例子都是正确的！

如果不了解关于样式和实现思路的更多背景知识，很难说哪种方法最好。

如果我们说：

＆＃34; social＆＃34; block明确地与页脚连接;
它只会出现并会出现在那里;
您希望强调它与页脚连接的事实。

然后，使用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/来自Nicolas Gallagher

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

无论使用何种实际符号，它们都基于相同的BEM原则。

BEM和嵌套的概念问题

2 个答案: