La méthode BEM pour le CSS

La méthode BEM pour le CSS

11 octobre 2021

Le BEM, acronyme de "Block Elements Modifiers", est une méthode permettant d'organiser les composants d'une page Web. Cette solution a été apportée par Yandex en 2010.

Le BEM découpe une page selon deux critères :

  • Le bloc : c'est un composant parent contenant un ou plusieurs éléments. Celui-ci peut être indépendant comme un footer, une navigation...
  • L'élément : c'est un composant appartenant à un bloc. Cela pourra être notamment un contenu, un titre, un lien...

Il reste enfin le modificateur. Celui-ci répond à un comportement et se modifie selon le contexte ou l'action d'un utilisateur sur une page. Le modificateur peut agir autant sur un bloc que sur un élément. Ainsi, une DIV contenant un élément présent sur chaque page peu arborer une couleur de fond différente selon la page sur laquelle il se trouve.

Utilisation

Bloc

Pour utiliser la méthode BEM, il faut respecter la convention de nommage mise en place.
Chaque classe CSS commence obligatoirement par le nom du bloc.

Prenons un petit formulaire comme exemple :

<form class="form">
  <label for="firstname">Firstname</label>
  <input type="text" id="firstname">
  <button>Done</button>
</form>
.form {
  display: block;
  width: 100%;
}

En utilisant BEM, mon bloc se nomme form.

Élément

Maintenant, je souhaite intervenir sur le label. Dans ce cas, le label est un élément enfant du bloc form. Pour agir dessus, je réutilise le nom du bloc, suivi de deux underscores et du nom de l'élément choisi.

<label for="firstname" class="form__label">Firstname</label>
.form__label {
  font-weight: 600;
  display: block;
}

Je peux faire la même chose sur le input et le button.

<input type="text" id="firstname" class="form__input">
<button class="form__button">Done</button>
.form__input {
  width: 15%;
  padding: 10px 15px;
  border: 1px solid green;
  font-size: 1.2em;
  border-radius: 6px;
}

.form__button {
  border: none;
  border-radius: 6px;
  padding: 10px 15px;
  font-size: 1.2em;
}

Modificateurs

Vous remarquerez que le bouton ne possède aucune couleur de fond. Il a simplement les éléments de base à tous les boutons qu'utiliseront mes pages, c'est-à-dire des bords arrondis, une marge intérieure...

Ce bouton peut prendre différentes couleurs selon l'utilisation que j'en ferai. Pour cela, je vais utiliser le principe des modificateurs. Le modificateur est précédé par deux tirets sur l'élément souhaité.

<button class="form__button form__button--blue">Done</button>
.form__button--blue {
  background-color: lightblue;
  color: white;
}

Plutôt simple comme organisation ! L'idée est de ranger son code CSS et d'éviter les conflits lors des nommages des classes CSS.

Utilisation en SASS

En SASS, l'utilisation de la méthode BEM est encore plus simple et permet d'augmenter sa compréhension.

.form {
  display: block;
  width: 100%;

  &__label {
    font-weight: 600;
    display: block;
  }

  &__input {
    width: 15%;
    padding: 10px 15px;
    border: 1px solid green;
    font-size: 1.2em;
    border-radius: 6px;
  }

  &__button {
    border: none;
    border-radius: 6px;
    padding: 10px 15px;
    font-size: 1.2em;

    &--blue {
      background-color: lightblue;
      color: white;
    }
  }
}

Vous pouvez retrouver le code complet de cet article sur mon CodePen.