Benennung von BEM-Unterblöcken

Question

Ich verwende einen BEM-Ansatz zum Schreiben von HTML + CSS. Mit dieser Syntax:

• Blocks: block_name
  • Elements: block_name__element_name
  • Modifikatoren: block_name__element_name - Modifikator

ich verwirrt, wenn ich einen Block in einem anderen Block haben. Zum Beispiel möchte ich in einem Header, dass der Header ein Block ist, den ich referenzieren kann, und das Nav und das Logo als Blöcke. Ich möchte diese Nav- und Logoblöcke als die innerhalb des site_headers verweisen. Aber wie würde ich das schreiben? Das Verketten von Blöcken wie block_name__sub_block_name erscheint ziemlich lang.

Hat jemand eine typische Art, wie sie dieses Beispiel schreiben würden?

<div class="site_header__logo"> 
    <a class="site_header__logo__link"> 
     <img class="site_header__logo__image"> 
    </a> 
</div> 

<nav class="site_header__main_nav"> 
    <ul> 
     <li class="site_header__main_nav__item"> 
      <a class="site_header__main_nav__link">Home</a> 
     </li> 
     <li class="site_header__main_nav__item"> 
      <a class="site_header__main_nav__link">About Us</a> 
     </li> 
     <li class="site_header__main_nav__item"> 
      <a class="site_header__main_nav__link">Contact Us</a> 
     </li> 
    </ul> 
</nav> 

<div class="site_header__phone"> 
    <p class="site_header__phone__number"> 
     555.555.5555 
    </p> 
</div> 

Answer 1

denke ich, das Logo, die Haupt-Header und Telefon fit in der Definition von block, die als in BEM Website gegeben:

Ein Block eine unabhängige Einheit ist, ein "Baustein" eine Anwendung. Ein Block kann entweder einfach oder zusammengesetzt sein (enthält andere Blöcke).

Sie haben drei einfache Blöcke (logo, main_nav und phone) in einem zusammengesetzten Block (site_header). Es ist tatsächlich sehr ähnlich dem HEAD Compound Block, der als Beispiel für die BEM methodology definitions page angegeben ist.

So würde ich es auf diese Weise schreiben:

<div class="logo"> 
    <a class="logo__link"> 
     <img class="logo__image"> 
    </a> 
</div> 

<nav class="main_nav"> 
    <ul> 
     <li class="main_nav__item"> 
      <a class="main_nav__link">Home</a> 
     </li> 
     <li class="main_nav__item"> 
      <a class="main_nav__link">About Us</a> 
     </li> 
     <li class="main_nav__item"> 
      <a class="main_nav__link">Contact Us</a> 
     </li> 
    </ul> 
</nav> 

<div class="phone"> 
    <p class="phone__number"> 
     555.555.5555 
    </p> 
</div> 

Wenn Sie denken, dass „Logo“ als Name viel zu generisch ist und nicht die anderen Arten von Logos im Projekt gerne darstellen geben Es hat einen anderen Namen wie "company_logo".

In Bezug auf das Styling schlägt BEM vor, Blockmodifikatoren und Elementmodifikatoren zu verwenden, um ihre verschiedenen Stile darzustellen.Zum Beispiel, wenn Sie Ihre Telefonnummer in fett haben wollen, dann können Sie eine Klasse Modifikator für sie in CSS erstellen und an Ihrem HTML-Anwendung wie folgt:

.phone__number--bold { 
    font-weight: bold; 
} 

<div class="phone"> 
    <p class="phone__number phone__number--bold"> 
     555.555.5555 
    </p> 
</div> 

Modifikatoren der bevorzugte Weg, über Styling Blöcke innerhalb anderen sind Blöcke. So nicht dies tun:

.site_header .phone__number { 
    font-weight: bold; 
} 

Ich denke, es gibt eine Ausnahme von dieser Regel, die ist, wenn Sie geben möchten „ortsabhängige Arten“ in den Block hinein. Nehmen wir an, Sie möchten dem "Logo" -Block einen linken Rand geben. Anstatt einen Modifikator wie das Erstellen:

.logo--push_20 { 
    margin-left: 20px; 
} 

ist es besser, folgen OOCSS second principle - Separate Behälter und Inhalt von - und lassen Sie den Auftrag an den Behälter:

.site_header .logo { 
    margin-left: 20px; 
} 

Answer 2

Yep, können Sie eine Menge in den Klassennamen Streifen aus. Zum Beispiel:

HTML:

`

<nav class="site_header"> 
    <ul> 
     <li class="nav_item"> 
      <a class="nav_link">Home</a> 
     </li> 
     <li class="nav_item"> 
      <a class="nav_link">About Us</a> 
     </li> 
     <li class="nav_item"> 
      <a class="nav_link">Contact Us</a> 
     </li> 
    </ul> 
</nav> 

`

Dann in Ihrem CSS Put:

`

.site_header { 
    ... stuff ... 
} 

.site_header .nav_item { 
    ... nav_item stuff ... 
} 

.site_header .nav_link { 
    ... nav_link stuff ... 
} 

`

Answer 3

Sie auch einen Blick auf BEM's FAQ haben könnte.

Was wäre ein Klassenname für ein Element in einem anderen Element? .block__elem1__elem2?

Was soll ich tun, wenn mein Block eine komplexe Struktur hat und seine Elemente verschachtelt sind? CSS-Klassen wie block__elem1__elem2__elem3 sehen erschreckend aus. Nach BEM-Methode sollte die Blockstruktur abgeflacht werden; Sie müssen die verschachtelte DOM-Struktur des Blocks nicht widerspiegeln. So würde die Klassennamen für diesen Fall sein:

.block{} 
.block__elem1{} 
.block__elem2{} 
.block__elem3{} 

Während die DOM-Darstellung des Blocks verschachtelt werden können:

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem2'> 
      <div class='block__elem3'></div> 
     </div> 
    </div> 
</div> 

Neben der Tatsache, dass die Klassen sieht viel schöner, es macht die Elemente sind nur vom Block abhängig. Sie können sie also problemlos über den Block verschieben, wenn Sie Änderungen an der Schnittstelle vornehmen. Die Änderungen der Block-DOM-Struktur würden keine entsprechenden Änderungen am CSS-Code erfordern.

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem2'></div> 
    </div> 
    <div class='block__elem3'></div> 
</div>