BEM metodologiyasining afzalliklari nimalardan iborat?

BEM (Blok, Element, Modifikator) – CSS sinf nomlash metodologiyasi, interfeysni mustaqil bloklarga bo‘lishga asoslangan.

Afzalliklar:

• Modullik: Interfeys komponentlarini yaratishga imkon beradi, ular bir-biridan mustaqil ravishda qayta ishlatilishi mumkin.
• Texnik xizmat ko‘rsatish: Aniq nomlash tuzilmasi tufayli, uslublarni topish va o‘zgartirish osonroq, boshqa qismlarga ta'sir qilmaydi.
• Kengaytiriluvchanlik: Katta loyihalar uchun mos, ko‘p dasturchilar bilan ishlashda sinf nomlari to‘qnashuvining oldini oladi.
• Aniqlik: Sinf nomlari elementlarning tuzilishi va maqsadini aks ettiradi, kodni o‘qish osonlashadi.
• Oldindan aytib bo‘ladiganlik: Blok uslublari kontekstga bog‘liq emas, bu kutilmagan xatti-harakatlarni oldini oladi.
• Izolyatsiya: Bir blokning uslublari boshqasining uslublariga ta'sir qilmaydi.

Misol:

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

/* Button ichidagi icon elementi */
.button__icon {
  margin-right: 5px;
}

/* Button bloki uchun primary modifikatsiya */
.button--primary {
  background-color: blue;
  color: white;
}

/* Button bloki uchun disabled modifikatsiya */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}