|<- [[BEM-like Naming]]|[[JavaScript Hooks]] ->|

====== Conventions de nommage en HTML ======

As I previously hinted at, les conventions de nommage ne sont pas nécéssairement si utiles dans notre CSS. Là où la puissance des conventions de nommage se situe réellement est dans notre balisage. Prenez le nommage HTML non-conventionnel suivant :

<code>
<div class="box  profile  pro-user">

  <img class="avatar  image" />

  <p class="bio">...</p>

</div>
</code>

Comment ces classes box et profile sont-elle related l'une à l'autre ? Comment les classes profile et avatar sont-elles related l'une à l'autre ? Sont-elles d'ailleurs related ? Devriez-vous utiliser pro-useravec  bio? Les classes image et profile se trouvent-elle dans la même partie du CSS ? Pouvez-vous utiliser avatar quelque part ailleurs ?

De ce balisage seulement, il est très difficile de répondre à ces questions. Cependant, utiliser des conventions de nommage change tout cela :

<code>
<div class="box  profile  profile--is-pro-user">

  <img class="avatar  profile__image" />

  <p class="profile__bio">...</p>

</div>
</code>

Nous pouvons maintenant clairement voir quelles classes sont et ne sont pas related l'une à l'autre, et comment; nous savons quelles classes nous pouvons utiliser hors du scope de ce composant; et nous savons quelles classes nous pourrions librement utiliser ailleurs.