Konzeptionelle Probleme mit BEM und Verschachtelung

Question

Ich versuche, einige HTML/CSS-Code an die BEM-Methodik anzupassen, aber die Klassen für die HTML zu sehen, denke ich, dass ich etwas falsch mache.

Ich habe ein verschachteltes Objekt "footer__social" mit einigen verschachtelten Symbolen. Im Anschluss an den Rat der FAQ im offiziellen BEM Seite, die ich mit einem HTML-Code wie das am Ende:

<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> 

Hier ist der Link zur FAQ: https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2

Für mich fühlt es sich wirklich seltsam zu haben, die „footer__ "in jedem der HTML-Tags.

Die Idee, die ich habe, ist die "footer__social" umzubenennen und starten Sie einen BEM-Block umbenennen zu "sozialen" mit ihren Kindern in "social__facebook" usw. umbenannt ... aber fühlen, dass der "soziale" Block getrennt ist die Fußzeile (sie erscheint nur dort).

<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> 

Was ist der richtige Weg?

Vielen Dank!

Answer 1

Ihre Beispiele beide korrekt sind!

Ohne mehr Kontext über die Stile und die Implementierungsidee zu kennen, wird es schwierig sein zu sagen, welches der beste Ansatz ist.

Wenn wir sagen:

1. Der "soziale" Block mit der Fußzeile verbunden ist ausdrücklich;
2. Es erscheint nur und wird dort erscheinen;
3. Sie möchten betonen die Tatsache, dass es mit der Fußzeile verbunden ist.

Dann gehen mit dem footer__ Präfix. Das macht am meisten Sinn für mich:

<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> 

Wenn es immer noch nicht richtig Sie fühlen, basierend auf meiner Erfahrung oft streng die BEM Namensgebung Techniken folgenden nicht immer Recht fühlen.Es gibt ein paar großen Ressourcen, die mich zu diesem Prozess geführt, so empfehle ich Ihnen die folgenden zwei zu überprüfen:

• http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ von Harry Robert
• http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ von Nicolas Gallagher

PS: Für all diese zusätzlichen Vorschläge und Ideen, ist es wichtig zu beachten:

Was auch immer die tatsächliche Notation verwendet, sie alle basieren auf den gleichen BEM-Prinzipien.

Answer 2

Ihre beiden Beispiele sind absolut gültig. Aber Ihr zweites Beispiel ist modularer, wo Ihre soziale Komponente leicht auf diese Weise an einen anderen Ort verschoben werden kann. Das Styling Ihrer sozialen Komponente sollte auch unabhängig von Ihrer Fußzeile sein.

In Bezug auf den Rest des Auszeichnungs vielleicht haben Sie alle diese Klassen nicht brauchen, aber nur einen Behälter, zum Beispiel wie folgt aus:

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