Care sunt avantajele metodologiei BEM?

BEM (Bloc, Element, Modifier) – metodologie de denumire a claselor CSS bazată pe împărțirea interfeței în blocuri independente.

Avantaje:

• Modularitate: Permite crearea de componente de interfață reutilizabile independent.
• Ușurință în întreținere: Datorită unei structuri clare de denumire, este mai ușor să găsești și să modifici stilurile fără a afecta alte părți ale proiectului.
• Scalabilitate: Potrivit pentru proiecte mari cu mulți dezvoltatori, deoarece reduce riscul de conflicte în numele claselor.
• Claritate: Numele claselor reflectă structura și scopul elementelor, ceea ce îmbunătățește lizibilitatea codului.
• Prevedere: Stilurile unui bloc nu depind de context, eliminând comportamentele neașteptate.
• Izolare: Stilurile unui bloc nu afectează stilurile altuia.

Exemplu:

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

/* Elementul icon din interiorul blocului button */
.button__icon {
  margin-right: 5px;
}

/* Modificatorul primary pentru blocul button */
.button--primary {
  background-color: blue;
  color: white;
}

/* Modificatorul disabled pentru blocul button */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}