Benennen einer Wrapper-Elementklasse bei Verwendung von BEM

Ich verstehe, dass bei der Verwendung von BEM die Klassennamen nicht direkt die HTML-Struktur widerspiegeln sollten, aber wie sollte ein Wrapper-Element benannt werden? Bitte ignorieren Sie meine spezielle Syntax (in der Nähe von SUIT); Es folgt immer noch BEM, nur mit einer anderen Art der Differenzierung der Elemente.Benennen einer Wrapper-Elementklasse bei Verwendung von BEM

Zum Beispiel:

<div class="?"> 
    <footer class="PageFooter"> 
    <h4 class="PageFooter-brand>…</h4> 
    <ul class="PageFooter-contactDetails">…</ul> 
    </footer> 
<div>

würde ich zur Zeit Klasse des Wrapper in diesem Fall als PageFooterWrapper, aber das fühlt sich klobig, da der Wrapper nicht unabhängig ist - es existiert lediglich für die PageFooter. Offensichtlich vor allem mit PageFooter- Präfix ist lächerlich, so dass nur die Behandlung der Wrapper als Teil von PageFooter: PageFooter-wrapper. Das ärgert mich, da hier ein implizierter Vorschlag angewendet wird.

Also was sollte die Klasse des Wrappers sein?

Quelle

2015-07-06 Undistraction

Warum gibt es überhaupt einen Wrapper um

@Rob Sei nicht so pedantisch. Dies ist ein Beispiel für die Frage. – Undistraction

Nicht pedantisch. Es ist eine technische Beobachtung von jemandem, der offensichtlich erfahrener ist als du. Welchen Zweck erfüllt es? – Rob

Die Art, wie ich es immer behandelt habe, ist die Hülle immer der Block so sein sollte:

<div class="PageFooter"> 
    <footer class="PageFooter-inner"> 
    <h4 class="PageFooter-brand">...</h4> 
    <ul class="PageFooter-contactDetails">...</ul> 
    </footer> 
</div>

Die B Schloss enthält E lements stattdessen etwas um meine B mit so Schloss ich folgte nur mit dem E Prinzip und begann mit inner 's anstelle von Behältern

Quelle

2015-07-06 12:09:33

Danke. Das macht einen Sinn, obwohl ich nicht glaube, dass ich die Tatsache mag, dass der Wrapper jetzt das Top-Level-Element in Bezug auf Klassen ist. Ein Wrapper ist das perfekte Beispiel für etwas, das leicht unnötig werden könnte, wenn sich ein Layout ändert, also fühlt es sich falsch an, es an die Fußzeile zu koppeln. Indem es als Unterelement behandelt wird, kann es leicht entfernt werden, ohne etwas anderes zu bewirken. Kurz gesagt, Sie haben die Fußzeile viel weniger in sich geschlossen und weniger tragbar gemacht. – Undistraction

Wenn das der Fall ist, dann könnten Sie argumentieren, dass der Wrapper nicht spezifisch für den "PageFooter" ist, sondern für den Inhalt um ihn herum, da er auf dem Layout der Dinge basiert.Es könnte also sinnvoll sein, sie zu entkoppeln und den Wrapper im Gegensatz zum 'PageFooter' an das Layout der Site zu binden? –

Ja. Genau dazu komme ich. Es sollte ein untergeordnetes Element des Containers und nicht ein Teil der Fußzeile sein. Ich behandle ein Element oft als einen Layout-Container mit Slots für Unterelemente, also denke ich, dass dies nur eine Variation davon ist. – Undistraction

Ich habe eine ctually zwei Klassen erfolgreich, mein Muster ist wie folgt:

<div class='page-section bem-block'> 
    <div class='bem-block__element'> 
     <!-- etc etc --> 
    </div> 
</div>

effektiv ein utility class mit bestimmten Wrapper Funktionen auszuführen. Die css würde wahrscheinlich ähnlich sein:

.page-section { 
    width: 100%; 
} 
@media screen and (min-width: 1200px) { 
    margin: 0 auto; 
    width: 1200px; 
}

Ich habe gefunden, das funktioniert gut in der Praxis. Es wäre auch möglich, .bem-block und seine Zeitgenossen von .page-section zu erben.

Diese Lösung ergänzt die von Dan Gamble.

Quelle

2015-07-16 21:09:37

Benennen einer Wrapper-Elementklasse bei Verwendung von BEM

Antwort

Verwandte Themen