Hogyan érhető el az izoláció a BEM módszertan…

A szigetelést blokkok, elemek és azok módosítói számára egyedi osztályok segítségével érik el.

Blokk: Egyedi osztályneve van, például button. A blokk osztályára alkalmazott stílusok csak ennek a blokknek a belsejében lévő elemekre vonatkoznak.
Elem: Egy osztályneve van, amely a blokk nevét, két aláhúzást és az elem nevét tartalmazza, például button__text. Az elem stílusai egy adott blokkhoz kötöttek, és nem befolyásolják ugyanazon névvel rendelkező elemeket más blokkokban.
Módosító: Egy osztályneve van, amely a blokk vagy az elem nevét, két kötőjelet (vagy egy aláhúzást, a megállapodás szerint) és a módosító nevét tartalmazza, például button--disabled vagy button__text_bold. A módosító hozzáad vagy módosít egy meglévő blokk vagy elem tulajdonságait, anélkül, hogy másokat befolyásolna.

HTML szerkezet példája:

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

<div class="card">
  <h2 class="card__title">Cím</h2>
  <p class="card__text">Kártya szöveg</p>
</div>

CSS példa:

.button {
  /* Csak a gomb stílusai */
}

.button--primary {
  /* Csak ennek a gombnak a módosító stílusai */
}

.button__icon {
  /* Csak az ikon stílusai a .button belsejében */
}

.button__text {
  /* Csak a szöveg stílusai a .button belsejében */
}

.card {
  /* Csak a kártya stílusai */
}

.card__title {
  /* Csak a cím stílusai a .card belsejében */
}

.card__text {
  /* Csak a szöveg stílusai a .card belsejében */
}

Ezzel a nevezéktan és stílusstruktúrával a CSS szabályok egy blokkra nem ütköznek másokkal, még akkor sem, ha hasonló nevű elemeket tartalmaznak. Ez megkönnyíti a komponensek fejlesztését, karbantartását és újrahasznosítását.

Hogyan érhető el az izoláció a BEM módszertan alkalmazásakor?