Ich habe zwei Klassen in der Kopfzeile: .header-container
和一个主题类,例如 solid-green
或 solid-blue
.
Das aktuelle Markup funktioniert gut beim Anwenden verwandter Designstile, aber ich möchte BEM verwenden, daher sollte das gesamte CSS in einer header-container
-Klasse verpackt sein:
.header-container { // all component styles }
.top-banner { height: 70px; } .main-banner { height: 140px; } .solid-green { .top-banner { background-color: green; } .main-banner { background-color: lightgreen; } } .solid-blue { .top-banner { background-color: blue; } .main-banner { background-color: lightblue; } }
<header class="header-container solid-green"> <div class="top-banner">Top banner</div> <div class="main-banner">Main banner</div> </header>
Wenn ich jedoch das CSS mit der header-container
-Klasse umschließe, funktioniert die Theme-Klasse nicht mehr. Kann mir jemand sagen, wo ich falsch liege?