Wie formatiere ich HTML nach BEM Namenskonzept?

Question

Ich habe den Code, mit dem ich die BEM-Benennung auf das Projekt anwenden kann. Aber ich denke, etwas stimmt nicht, weil BEM feststellt, dass Elemente von Elementen nicht existieren sollten. Wie kann ich sie dann benennen?

<div class="container"> 
<div class="profile"> 
    <p class="profile__message></p> 
    <div class="profile__item"> 
    <div class="profile__item__el profile__item__el-image"> 
     <a class="thumb"><img></a> 
     <div class="profile__item__el-remove"></div> 
    </div> 
    <span class="profile__item__el profile__item__el-name"></span> 
    <span class="profile__item__el profile__item__el-author"></span> 
    <span class="profile__item__el profile__item__el-date"></span> 
    <div class="profile__item__el-favorite"></div> 
    </div> 
</div> 
</div> 

Ich sehe, dass ich nicht eine eigene Klasse ‚profile__item__el‘ becuz nicht alle Elemente des gleichen Typs verwendet werden soll, aber die sind alle item-Elemente, und ich denke, es sollte von ihren Klassennamen offensichtlich , aber es scheint wie nach BEM ist es nicht korrekt.

Answer 1

Ich glaube, ich wahrscheinlich mehr in diese Richtung gehen würde, aber auch das ist nicht wirklich perfekt:

<div class="container"> 
    <div class="profile"> 
     <p class="profile__message></p> 
     <div class="profile__item"> 
     <div class="profile__attribute profile__image"> 
      <a class="thumb"><img></a> 
      <div class="action--remove"></div> 
     </div> 
     <span class="profile__attribute profile__name"></span> 
     <span class="profile__attribute profile__author"></span> 
     <span class="profile__attribute profile__date"></span> 
     <div class="action--favorite"></div> 
     </div> 
    </div> 
</div> 

Die Notwendigkeit der „profile__attribute“ Klasse fraglich. Sie brauchen es nur wirklich, wenn Sie alle diese verschiedenen Attribute mit Stilen versehen möchten.

Ich glaube, Sie missverstehen den Zweck des "Modifier" Teil von BEM. Erstens, Sie haben nur einen Bindestrich verwendet, aber es sollte mit zwei sein, und zweitens ist der Modifikator mehr für verschiedene Varianten der gleichen Sache, wie wenn Sie ein Button-Element und eine große und kleine Variante haben, dann könnten Sie Button haben --groß und Knopf - klein. Ich würde sagen, dass Name, Autor und Datum alle separate Elemente sind, nicht verschiedene Versionen des gleichen Elements.

Das alles gesagt, ich bin mir nicht wirklich sicher, es gibt eine bestimmte richtig oder falsch für BEM, eine Menge davon hängt von der Person und welche Art von Coding styleguide Sie haben könnten.

Answer 2

Kurze Antwort.

Jeder Block haben innerhalb nur Element oder eine anderen Block

Block-name__elem-name So hat jedes Element eine Klasse wie - ohne zusätzliche Klasse.

Jeder Block - Namespace festlegen.

Zum Ändern der Suche nach Blockor-Element in BEM verwenden Modifikator.

Wie es funktioniert: HTML + CSS - siehe unten

---

BEM auch ein Stapel von Technologie mit eigenem Template-Engine ist. So müssen Sie nicht einfach HTML schreiben - es kompiliert automatisch.

Wie es wie (bemjson) aussieht:

{ 
    block : 'row', 
    content : [ 
     { 
      elem : 'col', 
      mods : { sw : 4, mw : 2, lw : 2, xlw : 2 }, 
      content : [ 
       { 
        block : 'footer', // it's determine parent of element 
        elem : 'age', // but it's element 
        content : [ 
         { 
          block : 'icon', 
          mods : { type : 'some-icon' } 
         } 
        ] 
       }, 
      ] 
     }, 
    ] 
} 

Sie können Ausgabe html in Bündel (html) siehe:

<div class="row"> // block-namespace 
    <div class="row__col row__col_sw_4 row__col_mw_2 row__col_lw_2 row__col_xlw_2"> //elem row__col, then modifiers 
    <div class="footer__age"> // element age with forced block footer 
     <i class="icon icon_type_some-icon"> 
     <svg></svg> 
     </i> 
    </div> 
</div> 

CSS sieht wie folgt aus (Element im Wesentlichen in 2 lvl):

.row // namespace 
{ 
    margin: 0 -7px; 

    &__col // element 
    { 
     padding: 0 7px; 
    } 
    &__col_p_0 // element with modifier 
    { 
     padding: 0px; 
    } 
} 

Offizielle Website docs: https://en.bem.info/methodology/naming-convention/