BEM und erben Eigenschaften anderer Klassen

Question

Ich bin in ein kleines Problem mit BEM geraten. Ich habe folgendes:

<ul className="AppHeader__subnav-links"> 
    <li className="AppHeader__subnav-link--active">Details</li> 
    <li className="AppHeader__subnav-link">Conditions</li> 
    <li className="AppHeader__subnav-link">Actions</li> 
    <li className="AppHeader__subnav-link">Assets</li> 
</ul> 

Die Idee ist, dass der aktive Link eine Unterstreichung darunter haben wird. Aber das Problem ist, dass, da BEM-Klassen alle "Standalone" sind und nicht kaskadieren, die AppHeader__subnav-link--active nichts von AppHeader__subnav-link erbt (offensichtlich). Gibt es einen besseren Weg, dies zu strukturieren? Oder muss ich tun, die gerade zurückgreifen folgende:

&__subnav-link { 
    // properties 

    &--active { 
    @extend .AppHeader__subnav-link; 
    // properties 
    } 
} 

Answer 1

BEM setzt voraus, dass der Modifikator zusätzlich auf die Basisklasse hinzugefügt wird.

Eine korrigierte Version Ihrer Markup ist:

<ul className="AppHeader__subnav-links"> 
    <li className="AppHeader__subnav-link AppHeader__subnav-link--active">Details</li> 
    <li className="AppHeader__subnav-link">Conditions</li> 
    <li className="AppHeader__subnav-link">Actions</li> 
    <li className="AppHeader__subnav-link">Assets</li> 
</ul> 

---

& hellip; da BEM Klassen alle „stand alone“ sind und nicht kaskadieren & hellip nicht;

Ich muss dieser Aussage nicht zustimmen. BEM-Klassen basieren stark auf der Kaskade für Modifikatoren. Es wird erwartet, dass eine Basisklasse verwendet wird und dass anschließend ein Modifikator folgt, um die erforderlichen Stile für diesen bestimmten Status zu überschreiben.

Betrachten Sie das folgende CSS:

.widget { 
    border-color: gray; 
} 
.widget--active { 
    border-color: black; 
} 

Wenn die Reihenfolge vertauscht wurden, würde der Modifikator nicht mehr korrekt funktionieren. BEM stützt sich auf die Kaskade, versucht jedoch, die Spezifität niedrig zu halten, um das Beste daraus zu machen.