Millised on BEM-metodoloogia eelised?

BEM (Blokk, Element, Modifier) – CSS klasside nimetamise metodoloogia, mis põhineb kasutajaliidese jagamisel sõltumatuteks blokkideks.

Eelised:

• Modulaarsus: võimaldab luua kasutajaliidese komponente, mida saab sõltumatult taaskasutada.
• Hooldatavus: selge nimetussüsteem muudab stiilide leidmise ja muutmise lihtsamaks, mõjutamata teisi projekti osi.
• Skaleeritavus: sobib suurte projektide jaoks, kus on palju arendajaid, kuna vähendab klassinimede konflikti riski.
• Selgus: klasside nimed peegeldavad elementide struktuuri ja eesmärki, parandades koodi loetavust.
• Eelennustatavus: bloki stiilid ei sõltu kontekstist, mis väldib ootamatuid käitumisi.
• Isolatsioon: ühe bloki stiilid ei mõjuta teise stiili.

Näide:

/* Nuppu blokk */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid blue;
}

/* Nupu ikona element */
.button__icon {
  margin-right: 5px;
}

/* Primary modifikator nupule */
.button--primary {
  background-color: blue;
  color: white;
}

/* Disabled modifikator nupule */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}