BEM和嵌套的概念问题

我试图改编一些HTML/CSS代码到BEM方法，但是看到HTML的类我觉得我做错了什么。BEM和嵌套的概念问题

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

这里是链接到FAQ：https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2

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

我的想法是重命名“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>

这样做的正确方法是什么？

谢谢！

来源

2016-11-15 Ionthas

关键是不要混淆上下文特定样式和一般组件样式。如果您需要专门为“footer”IMO内部显示的“社交”组件设置样式，那么它应该按照您在第一个场景中描述的方式进行定义，或者使用'class =“footer__social social”'来进行分离。（这就是说我不是BEM纯粹主义者）。 –

你的例子都是正确的！

不知道更多关于样式和实现思想的上下文，很难说哪个是最好的方法。

如果我们说：

“社会”块与页脚明确相连;
它只会出现在那里;
你想强调它与页脚连接的事实。

然后，去与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：对于所有这些额外的建议和想法，请务必注意：

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

来源

2016-11-15 21:38:48

这两个例子都是完全有效的。但是你的第二个例子是更加模块化的，你的社交组件可以很容易地被移动到另一个位置。造型您的社交组件应该与您的页脚无关。

关于也许你不需要所有这些类，但只是一个容器，例如像这样标记的其余部分：

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

来源

2016-11-15 21:31:52 Ingvi

BEM和嵌套的概念问题

回答

相关问题