Jakie są zalety metodologii BEM?

BEM (Blok, Element, Modifier) – metodologia nazewnictwa klas CSS oparta na podziale interfejsu na niezależne bloki.

Zalety:

• Modularność: Umożliwia tworzenie komponentów interfejsu, które można wielokrotnie wykorzystywać niezależnie od siebie.
• Łatwość konserwacji: Dzięki przejrzystej strukturze nazewnictwa, łatwiej jest znaleźć i zmienić style bez wpływu na inne części projektu.
• Skalowalność: Odpowiedni dla dużych projektów z wieloma programistami, ponieważ zmniejsza ryzyko konfliktów nazw klas.
• Czytelność: Nazwy klas odzwierciedlają strukturę i funkcję elementów, co poprawia czytelność kodu.
• Przewidywalność: Style bloku nie zależą od kontekstu, co wyklucza nieoczekiwane zachowania.
• Izolacja: Style jednego bloku nie wpływają na style innego.

Przykład:

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

/* Element icon w obrębie bloku button */
.button__icon {
  margin-right: 5px;
}

/* Modyfikator primary dla bloku button */
.button--primary {
  background-color: blue;
  color: white;
}

/* Modyfikator disabled dla bloku button */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}