Nommage BEM : imbrication ou nouveau bloc?

Bonjour à tous,

Je suis actuellement en train d'apprendre à appliquer le nommage BEM pour structurer mes projets.
J'ai bien compris le principe du procédé, je trouve que mon code gagne en lisibilité mais c'est beaucoup moins clair cependant lorsque je dois faire des imbrications en plusieurs niveaux.

Je construis par exemple un aside sidebar contenant un élément "barre de recherche" sidebar__search et un élément contenant des informations relatives à l'article en cours de lecture (une mini-biographie de l'auteur/du sujet) sidebar__about.

Cependant, j'ai besoin d'aller plus en profondeur et créer d'autres éléments à mes éléments.
Quel est d'après vous la syntaxe la plus correcte à mon cas de figure?

  

<aside="sidebar">
  <div class="sidebar__search search">
    <div class="search__field">
    </div>
    <div class="search__icon">
    </div>
  </div>
  <div class="sidebar__about about">
    <div class="about__img">
    </div>
    <h3 class="about__title">
    </h3>
    <p class="about__desc">
    </p>
  </div>
</aside>

Ou bien doit-on faire totalement abstraction du parent lorsque l'on atteint un niveau inférieur et dans ce cas, ne pas spécifier la parentalité avec la sidebar :

  

<aside="sidebar">
  <div class="search">
    <div class="search__field">
    </div>
    <div class="search__icon">
    </div>
  </div>
  <div class="about">
    <div class="about__img">
    </div>
    <h3 class="about__title">
    </h3>
    <p class="about__desc">
    </p>
  </div>
</aside>

Les search et about sont-ils des sous blocs ou des blocs à part entière? En gros, doit-on représenter des sous éléments?

J'espère avoir été le plus clair possible car ça ne l'est pas dans ma tête !

Bonne soirée et merci d'avance !
Modifié par yourkaribbean (17 Jan 2017 - 20:24)

Hello,

Je ne connais pas les règles BEM sur le bout des doigts, mais la réponse me semble logique d'un point de vue de la modularisation : si ta recherche (search) doit être déplacée au sein d'un autre Block, ses styles doivent continuer à s'appliquer correctement.
Si j'étais moi, les styles et le nommage de "search" ne devraient pas être liés à un conteneur quel qu'il soit.

D'accord c'est bien ce que je me disais ! Merci

Hello,

Personnellement j'utilise couramment la méthode de ton premier exemple et elle ne me semble pas être en contradiction avec le convention BEM, au contraire.

.sidebar__search servant au positionnement de .search dans .sidebar, un composant dans un composant.

Appliquer ce positionnement via .sidebar .search ou directement sur .search ne suivrait pas la logique BEM.

BEM est censé nous faciliter la vie, il faut l'utiliser avec souplesse pour ne pas finir par s'arracher les cheveux, il en perdrait son intérêt sinon
Modifié par mob (31 Jan 2017 - 22:46)