Kuidas saavutada isolatsioon BEM-metoodika kasutamisel?

Izolatsioon saavutatakse unikaalsete klasside abil plokkidele, elementidele ja nende modifikatoritele.

• Blokk: omab unikaalset klassi nime, näiteks button. Stiilid, mis rakenduvad plokile, mõjutavad ainult selle ploki sisemisi osi.
• Element: omab klassi nime, mis koosneb ploki nimest, kahest alakriipsust ja ise elemendi nimest, näiteks button__text. Elemendi stiilid on seotud konkreetse plokiga ega mõjuta teise ploki sarnaseid elemente.
• Modifikator: omab klassi nime, mis koosneb ploki või elemendi nimest, kahest sidekriipsust (või ühest alakriipsust, olenevalt kokkuleppest) ja modifikatori nimest, näiteks button--disabled või button__text_bold. Modifikator lisab või muudab olemasoleva ploki või elemendi omadusi, mitte ei mõjuta teisi.

HTML-i näide:

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

<div class="card">
  <h2 class="card__title">Pealkiri</h2>
  <p class="card__text">Kaardi tekst</p>
</div>

CSS-i näide:

.button {
  /* Ainult nupu stiilid */
}

.button--primary {
  /* Modifikatori stiilid ainult selle nupu jaoks */
}

.button__icon {
  /* Ikoni stiilid ainult .button sees */
}

.button__text {
  /* Teksti stiilid ainult .button sees */
}

.card {
  /* Ainult kaardi stiilid */
}

.card__title {
  /* Pealkirja stiilid ainult .card sees */
}

.card__text {
  /* Teksti stiilid ainult .card sees */
}

Tänu sellisele nimetamise ja stiilide struktuurile ei konflikti ühe ploki stiilireeglid teistega, isegi kui neil on sarnased elementide nimed. See hõlbustab arendamist, hooldust ja komponentide korduvkasutust.