Koje su prednosti BEM metodologije?

BEM (Blok, Element, Modifier) – metodologija imenovanja CSS klasa zasnovana na deljenju interfejsa na nezavisne blokove.

Prednosti:

• Modularnost: Omogućava kreiranje komponenti interfejsa koje se mogu ponovo koristiti nezavisno jedna od druge.
• Održavanje: Zahvaljujući jasnoj strukturi imenovanja, lakše je pronaći i menjati stilove bez uticaja na druge delove projekta.
• Skalabilnost: Pogodno za velike projekte sa mnogo programera, jer smanjuje rizik od konflikata u imenima klasa.
• Jasnoća: Imena klasa odražavaju strukturu i svrhu elemenata, što poboljšava čitljivost koda.
• Predvidivost: Stilovi bloka nisu zavisni od konteksta, što isključuje neočekivano ponašanje.
• Izolacija: Stilovi jednog bloka ne utiču na stilove drugog.

Primer:

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

/* Element ikona unutar bloka dugme */
.button__icon {
  margin-right: 5px;
}

/* Modifikator primary za blok dugme */
.button--primary {
  background-color: blue;
  color: white;
}

/* Modifikator disabled za blok dugme */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}