Kennt ihr schon BEM und wie man dies mit LESS verbindet?

BEM ist eine CSS Namenskonvention und steht für Block, Element, Modifier. Hierbei geht es darum, CSS Klassen besser lesbar zu schreiben, so dass auch andere Entwickler nachvollziehen können, wofür die entsprechenden Klassen sind.

 

Die normale schreibweise wäre:

„.Block__element–modifier“.

Block ist das umschließende HTML Tag, mit Element bezeichnet man die Kinder des Blockelements und Modifier ist eine Variation.

Unterstriche verwende ich nicht so gerne, daher gibt es hier eine Abwandlung:

„.block-element–modifier“.

 

Beispiel für die Nutzung wäre eine Navigation. Dann hätte das <ul> Tag die Klasse (cssKlasseDesBlockHTMLTag): „.mainNavigation“, das <li> Element(cssKlasseDesElements): „.mainNavigation-item“ und wenn das Navigations-Item aktiv ist(cssKlassDerVariation): „.mainNavigation–active“.

<ul class="mainNavigation"> 
   <li class="
       mainNavigation-item 
       mainNavigation--active">
       ...
   </li>
</ul>

Da ich meistens mit Less CSS arbeite, gibt es dafür einen Mixin:

// BEM mixin
.b(@name, @content) {
    // Block: Umgibt ein in sich geschlossenes Module
    .@{name} {
        @content();
    }
}
.e(@name, @content) {
    // Element: Ist ein Element in diesem Module
    &\-@{name} {
        @content();
    }
}
.m(@name, @content) {
    // Modifier: Ist eine Modifikation eines Elementes in diesem Module
    &\--@{name} {
        @content();
    }
}

 

Hier wird dieses Mixin in einer Less Datei benutzt:

    .b(mainNavigation,{
        ...
        .e(item, {
            ...
        });

        .m(active, {
            ...
        });
    });

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.