Kokios yra BEM metodologijos privalumai?

BEM (Blokas, Elementas, Modifikatorius) – CSS klasių pavadinimo metodas, pagrįstas sąsajos padalijimu į nepriklausomus blokus.

Privalumai:

• Moduliškumas: leidžia kurti sąsajos komponentus, kurie gali būti naudojami pakartotinai ir nepriklausomai vienas nuo kito.
• Priežiūra: aiški pavadinimų struktūra leidžia lengviau rasti ir keisti stilius, nepažeidžiant kitų projekto dalių.
• Mastelio keitimas: tinkamas dideliems projektams su daug programuotojų, nes sumažina klasių pavadinimų konfliktų riziką.
• Aiškumas: klasių pavadinimai atspindi elementų struktūrą ir paskirtį, gerina kodo skaitomumą.
• Numatymas: bloko stiliai nepriklauso nuo konteksto, tai išvengia netikėtų elgsenų.
• Izoliacija: vieno bloko stiliai neturi įtakos kito stiliams.

Pavyzdys:

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

/* Ikona mygtuko viduje */
.button__icon {
  margin-right: 5px;
}

/* Pagrindinis modifikatorius mygtuko blokui */
.button--primary {
  background-color: blue;
  color: white;
}

/* Išjungimo modifikatorius mygtuko blokui */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}