Šta je BEM metodologija?

BEM (Blok, Element, Modifikator) — metodologija imenovanja klasa u CSS-u za kreiranje skalabilnog i održivog koda. Njena svrha je da učini komponente nezavisnim, ponovo upotrebljivim i lako promenljivim.

Osnovni principi:

• Blok: Nezavisna komponenta sa jedinstvenim imenom. Može sadržavati elemente i druge blokove.

  <div class="card">...</div>
  

• Element: Deo bloka koji nema samostalno značenje van konteksta bloka. Ime elementa se odvoji od imena bloka sa dva donja crte (__).

  <div class="card">
    <h2 class="card__title">...</h2>
    <p class="card__text">...</p>
  </div>
  

• Modifikator: Dodaje stanje ili menja izgled/ponašanje bloka ili elementa. Ime modifikatora se odvoji od imena bloka ili elementa sa dva crta (--).

  <button class="button button--primary button--disabled">...</button>
  <div class="card card--featured">...</div>
  

Prednosti:

• Čitljivost: Klase su lako razumljive, vidi se struktura komponente.
• Ponovna upotrebljivost: Komponente su nezavisne i mogu se koristiti u različitim delovima projekta.
• Održavanje: Promene u jednoj komponenti minimalno utiču na druge.
• Skalabilnost: Pogodno za velike timove i projekte.

Primer strukture:

.card {
  /* Stilovi bloka */
}

.card__title {
  /* Stilovi elementa */
}

.card__text {
  /* Stilovi elementa */
}

.card--featured {
  /* Stilovi modifikatora bloka */
}

.button {
  /* Stilovi bloka */
}

.button--primary {
  /* Stilovi modifikatora bloka */
}

.button--disabled {
  /* Stilovi modifikatora bloka */
}