Ako sa dosahuje izolácia pri použití metodológie BEM?

Izolácia sa dosahuje pomocou jedinečných tried pre bloky, prvky a ich modifikátory.

• Blok: Má jedinečný názov triedy, napríklad button. Štýly aplikované na triedu bloku platia iba pre prvky vnútri tohto bloku.
• Prvok: Má názov triedy pozostávajúci z názvu bloku, dve podčiarknutia a názvu prvku, napríklad button__text. Štýly prvku sú viazané na konkrétny blok a neovplyvňujú prvky s rovnakým názvom v inom bloku.
• Modifikátor: Má názov triedy pozostávajúci z názvu bloku alebo prvku, dve pomlčky (alebo jedno podčiarknutie, podľa dohody) a názvu modifikátora, napríklad button--disabled alebo button__text_bold. Modifikátor pridáva alebo mení vlastnosti existujúceho bloku alebo prvku, bez ovplyvnenia iných.

Príklad štruktúry HTML:

<button class="button button--primary">
  <span class="button__icon"></span>
  <span class="button__text">Stlačiť</span>
</button>

<div class="card">
  <h2 class="card__title">Nadpis</h2>
  <p class="card__text">Text karty</p>
</div>

Príklad CSS:

.button {
  /* Štýly iba pre tlačidlo */
}

.button--primary {
  /* Štýly modifikátora iba pre toto tlačidlo */
}

.button__icon {
  /* Štýly ikony iba vnútri .button */
}

.button__text {
  /* Štýly textu iba vnútri .button */
}

.card {
  /* Štýly iba pre kartu */
}

.card__title {
  /* Štýly nadpisu iba vnútri .card */
}

.card__text {
  /* Štýly textu iba vnútri .card */
}

Vďaka tejto nomenklatúre a štruktúre štýlov sa pravidlá CSS pre jeden blok nekrížia s pravidlami pre iný, aj keď obsahujú prvky s podobnými názvami. To uľahčuje vývoj, údržbu a opätovné použitie komponentov.