Comment l'isolation est-elle réalisée lors de…

L'isolation est réalisée grâce à des classes uniques pour les blocs, les éléments et leurs modificateurs.

Bloc : Possède un nom de classe unique, par exemple, button. Les styles appliqués à la classe du bloc ne s'appliquent qu'aux éléments à l'intérieur de ce bloc.
Élément : Possède un nom de classe composé du nom du bloc, de deux underscores et du nom de l'élément, par exemple, button__text. Les styles de l'élément sont liés à un bloc spécifique et n'affectent pas les éléments portant le même nom dans un autre bloc.
Modificateur : Possède un nom de classe composé du nom du bloc ou de l'élément, de deux tirets (ou un underscore, selon l'accord) et du nom du modificateur, par exemple, button--disabled ou button__text_bold. Le modificateur ajoute ou modifie les propriétés d'un bloc ou d'un élément existant, sans affecter les autres.

Exemple de structure HTML :

<button class="button button--primary">
  <span class="button__icon"></span>
  <span class="button__text">Cliquez</span>
</button>

<div class="card">
  <h2 class="card__title">Titre</h2>
  <p class="card__text">Texte de la carte</p>
</div>

Exemple de CSS :

.button {
  /* Styles uniquement pour le bouton */
}

.button--primary {
  /* Styles du modificateur uniquement pour ce bouton */
}

.button__icon {
  /* Styles de l'icône uniquement à l'intérieur de .button */
}

.button__text {
  /* Styles du texte uniquement à l'intérieur de .button */
}

.card {
  /* Styles uniquement pour la carte */
}

.card__title {
  /* Styles du titre uniquement à l'intérieur de .card */
}

.card__text {
  /* Styles du texte uniquement à l'intérieur de .card */
}

Grâce à cette nomenclature et cette structure de styles, les règles CSS pour un bloc ne entrent pas en conflit avec celles d'un autre, même s'ils contiennent des éléments avec des noms similaires. Cela facilite le développement, la maintenance et la réutilisation des composants.

Comment l'isolation est-elle réalisée lors de l'utilisation de la méthodologie BEM ?