BEM ыкмасын колдонуунун артыкчылыктары кандай?

BEM (Блок, Элемент, Модификатор) – CSS класстарынын ысымдарын берүү ыкмасы, интерфейсти көзкарандысыз блокторго бөлүү негизинде.

Артыкчылыктары:

• Модулдук: Интерфейс компоненттерин түзүүгө мүмкүндүк берет, алар бири-биринен көзкарандысыз кайра колдонулушу мүмкүн.
• Камсыздоо оңойлугу: Ачык ысым түзүмү аркылуу стильдерди табуу жана өзгөртүү оңой, башка бөлүктөрүнө таасир этпестен.
• Өлчөмдүү: Көп иштеп чыгуучулары бар чоң долбоорлор үчүн ылайыктуу, анткени класстардын аталыштарындагы кагылышуу коркунучун азайтат.
• Ачыктык: Класстардын аттары элементтердин түзүлүшүн жана максатын чагылдырат, коддун окумдуулугун жакшыртат.
• Күтүлбөгөн жүрүм-турумдун алдын алуу: Блоктун стили контекстке көзкаранды эмес, бул күтүлбөгөн жүрүм-турумду жокко чыгарат.
• Изоляция: Бир блоктун стили башка блоктун стилине таасир этпейт.

Мисал:

/* Түймө блогу */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid blue;
}

/* Түймө ичиндеги icon элемент */
.button__icon {
  margin-right: 5px;
}

/* Түймө блогу үчүн primary модификатору */
.button--primary {
  background-color: blue;
  color: white;
}

/* Түймө блогу үчүн disabled модификатору */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}