Nommer correctement ses classes CSS avec BEM

BEM est une convention de nommage pour le CSS qui va nous aider à rendre nos classes plus compréhensibles. Elle permet de réduire les conflits de noms de classes en CSS.

BEM est l’acronyme de bloc, élément, modificateur.

Les concepts de BEM

Vous assignez à chaque sélecteur que vous écrivez à l’une de ces trois catégories : bloc, élément, modificateur.

Tout en nommant le sélecteur, vous définissez sa fonctionnalité, ses relations : vous rendez ici votre code modulaire.

Un sélecteur est soit un bloc, un élément ou un modificateur.

Un bloc

Un bloc c’est un composant qui encapsule une entité principale.

ex. : header, main, nav, input, checkbox

Un élément

C’est une partie d’un bloc qui n’a pas de signification en soi et qui est sémantiquement lié à son bloc parent.

ex. : menu__item, list__item, checkbox__caption, header__title

Un modificateur

C’est une partie changeante d’un bloc ou d’un élément, qui modifie son apparence ou son comportement.

ex. : nav–disabled, hero–highlighted, chekbox–checked, nav–fixed, header__title–size-big

Utiliser la syntaxe BEM

Les noms de classe en BEM sont structurés comme suit :

« .block__element–modifier« 

• Les deux tirets -- sont utilisés pour les modificateurs, tandis que les tirets bas __ sont utilisés pour les éléments.
• Les noms de classe en BEM sont descriptifs et doivent être basés sur la fonctionnalité de l’élément.

Exemple pratique : nommage des classes

Toutes les classes CSS commencent nécessairement par le nom du bloc :

ex. : .menu

Si vous souhaitez ajouter dans votre bloc .menu un élément item, vous le nomme en séparant le bloc de l’élément par deux underscores. 

ex. : .menu__item

Pour le modificateur, vous séparez le bloc ou l’élément par deux tirets : 

ex. .menu__item–is-active

ou bien

.menu–is-active

Je m’exerce

Supposons que nous avons un bloc « bouton » avec deux états, « normal » et « actif ».

Comment nommez-vous vos classes ?

Présentez un exemple de code.

Quiz

BEM sert à :

• réduire les conflits de nommage
• réduire les conflits de nesting
• réduire les conflits liés à la spécificité

BEM présente les avantages de :

• rendre le code CSS plus modulaire et facile à comprendre.
• rendre le code HTML plus cohérent
• rendre le code HTML et CSS plus cohérent et prévisible ce qui rend le code plus facile à maintenir.

Voir aussi

BEM Sheet

Getbem.com

Definitions-digital.com/webdesign/bem

Solution de l’exercice

• Vous pouvons nommer les classes comme suit : .button, .button__text, .button--normal et .button--active.
• .button est le nom du bloc
• __text est un élément du bloc
•  --normal et --active sont des modificateurs.

Code HTML

<button class="button button--normal">
  <span class="button__text">Cliquez ici</span>
</button>

<button class="button button--active">
  <span class="button__text">Cliquez ici</span>
</button>

Code CSS

.button {
  display: flex;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #ccc;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}

.button__text {
  display: flex;
}

.button--normal {
  background-color: #ccc;
  color: #fff;
}

.button--active {
  background-color: #333;
  color: #fff;
}

Par Stéphane ARRAMI