BEM Namenskonvention

Question

Ich habe gerade angefangen, BEM als meine Namenskonvention für Klassen zu verwenden und fange an, mich damit vertraut zu machen, aber ich habe eine Frage, die ich gerne versuchen würde, sie besser zu verstehen.

Ich habe folgende Block ...

<div class="overlay"> 
    <div class="picturefill"> 
     <img class="picturefill__img" src="images/test.png" /> 
    </div> 

    <div class="overlay__content overlay__content--bottom-left"> 
     <h2 class="overlay__title">About</h2> 
     <a class="overlay__link" href="#">learn more</a> 
    </div> 
</div> 

Ich möchte sowohl die h2 machen und verknüpfen weiß, die einfach genug ist, aber ich habe auch eine andere Art von Block, die außerhalb des Overlay liegt vor, wenn Ich möchte, dass ein h2 weiß ist. Was ist der beste Weg, dies zu tun?

Habe ich die CSS wie folgt erstellen ...

.overlay__title, 
.overlay__text{ 
    color: white; 
} 

.otherBlock__title{ 
    color: white; 
} 

Oder gibt es einen besseren Weg, dies zu tun? Kann ich eine Dienstprogrammklasse erstellen, um weiße Elemente zu erstellen?

Answer 1

Ich kann nicht sicher sagen, wie ich dein Design noch nie gesehen habe, aber was ich tun würde, ist eine universelle Block namens, sagen wir article mit optionalen Modifikator overlay. So würde das ganze Bild so aussehen:

<div class="article"> 
    <div class="picturefill"> 
     <img class="picturefill__img" src="images/test.png" /> 
    </div> 

    <div class="article__content article__content--bottom-left"> 
     <h2 class="article__title">About</h2> 
     <a class="article__link" href="#">learn more</a> 
    </div> 
</div> 

<div class="article article--overlay"> 
    <div class="picturefill"> 
     <img class="picturefill__img" src="images/test.png" /> 
    </div> 

    <div class="article__content article__content--bottom-left"> 
     <h2 class="article__title">About</h2> 
     <a class="article__link" href="#">learn more</a> 
    </div> 
</div> 

Und so können Sie Stile auf diese Weise anwenden:

.article__title { 
    color: white; 
} 

.article-overlay article__title { 
    color: black; 
} 

Answer 2

Nun, BEM ist nur eine Methode. Sie können alles tun, was Sie wollen. :) Wenn also Ihre Kopfzeile und der Link für diese Komponente immer weiß sind, speichern Sie sie in der Deklaration der Komponente css. Wenn es sich um eine lokale Angelegenheit ist, dann so etwas wie helpers.css erstellen, wo Sie Regeln speichern werden wie:

.white-text { color: white; } 
.point { cursor: pointer; } 
.text-center { text-align: center; } 

Das ist 100% ok Lösung.

UPDATE

erwähnt nur 2 Nachteile auf meine Antwort. Kann mir nicht vorstellen, dass jemand Methodologieantwort negieren kann. : D

Was ich dem Autor sagen wollte, ist es eine wirklich gute Entscheidung, häufig wiederholte Regeln in getrennten selbst erklärten Selektoren zu speichern. Zum Beispiel, wie Bootstrap es macht.

Answer 3

Ich möchte sowohl die h2 als auch die Verbindung weiß machen, das ist einfach genug, aber ich habe auch eine andere Art von Block, der außerhalb der Überlagerung existiert, wo ich möchte, dass eine h2 weiß ist ... was ist der beste Weg, um das zu tun?

Für Ihren speziellen Fall, es klingt wie der beste Weg wäre, den Code zu schreiben:

// in overlay.css/.less/.scss/etc... 
.overlay__title, 
.overlay__text{ 
    color: white; 
} 

// in otherBlock.css/.less/.scss/etc... 
.otherBlock__title{ 
    color: white; 
} 

Welche seltsam vertraut aussieht.

Um zu erklären, warum, nehmen wir einen Schritt weg von CSS und schauen uns an, wie andere Programmiersprachen funktionieren.

Stellen Sie sich vor, Sie haben ein Objekt in einer OOP-Sprache, z. Das Buchobjekt wird wahrscheinlich eine title (e.x.Per Anhalter durch die Galaxis):

class Book { 
    string Title { get; set; } 
} 

Nun stell dir vor, dass Sie jetzt ein Objekt erstellen, die eine Person darstellt. Die Person, Objekt auch braucht einen title (e.x. Dr.):

class Person { 
    string Title { get; set; } 
} 

Zwischen diesen beiden Klassen gibt es keine Vererbungsstruktur. Dies bedeutet, dass es einige Code geben wird, der trotz Ähnlichkeit neu geschrieben werden muss.

---

zurück zu CSS gehen, diese beiden Blöcke passieren einige ähnliche Arten haben. Sie haben keine Art von Beziehung zwischen den beiden beschrieben, die sie für die Wiederverwendung von Code nutzen sollten, also kopieren Sie einfach die Stile.

Wenn Sie einen Prä-Prozessor verwenden, können Sie feststellen, dass es — für Stücke von wieder verwendbaren Arten — besonders — und Mixins für Farben — Variablen zu verwenden, besonders nützlich ist die Menge an Code des CSS Sie tatsächlich schreiben, aber am Ende zu reduzieren wird mäßig repetitiv sein.

Das ist in Ordnung. Wenn Ihr CSS gezippt wird, wird die Duplizierung ziemlich gut komprimiert.

---

... aber was ist mit anderen Fällen?

Wenn Sie feststellen, dass Sie ständig einen bestimmten Satz von Arten überschreiben (.body__text, .content__text, .description__text), und sie beziehen sich alle auf das gleiche Element (ex <p>), dann betrachten Sie Ihre Standardstile für dieses Element Aktualisierung der reduzieren Menge an CSS, mit der Sie das Element überschreiben.

Wenn Sie feststellen, dass Sie die gleiche bestimmte Struktur in vorhandenen Blöcken ständig neu erstellen, müssen Sie möglicherweise einen neuen Block erstellen. Zum Beispiel:

<div class="article"> 
    <time class="timestamp"> 
    <span class="timestamp__date">...</span> 
    <span class="timestamp__time">...</span> 
    </time> 
    ... 
</div> 

und

<div class="post"> 
    <time class="timestamp"> 
    <span class="timestamp__date">...</span> 
    <span class="timestamp__time">...</span> 
    </time> 
    ... 
</div> 

:

<div class="article"> 
    <time class="article__timestamp"> 
    <span class="article__date">...</span> 
    <span class="article__time">...</span> 
    </time> 
    ... 
</div> 

und

<div class="post"> 
    <time class="post__timestamp"> 
    <span class="post__date">...</span> 
    <span class="post__time">...</span> 
    </time> 
    ... 
</div> 

könnte Refactoring