مزایای روش‌شناسی BEM چیست؟

BEM (Блок, Элемент, Модификатор) – метадология номенования CSS класаў, заснаваная на падзеле інтэрфейсу на незалежныя блокі.

Перавагі:

• Модульнасць: Дазваляе ствараць кампаненты інтэрфейсу, якія можна паўторна выкарыстоўваць незалежна адзін ад аднаго.
• Падтрымка: Дзякуючы яснай структураванай сістэме імёнаў, лягчэй знаходзіць і змяняць стылі без уплыву на іншыя часткі праекта.
• Маштабаванасць: Падыходзіць для вялікіх праектаў з многімі распрацоўшчыкамі, бо зніжае рызыку канфліктаў у імёнах класаў.
• Яснасць: Імёны класаў адлюстроўваюць структуру і прызначэнне элементаў, што паляпшае чытальнасць кода.
• Прадказальнасць: Стылі блока не залежаць ад кантэксту, што выключае нечаканае паводзіны.
• Ізаляванасць: Стылі аднаго блока не ўплываюць на стылі іншага.

Прыклад:

/* Блок кнопка */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid blue;
}

/* Элемент іконка ўнутры блока кнопка */
.button__icon {
  margin-right: 5px;
}

/* Мадыфікатар primary для блока кнопка */
.button--primary {
  background-color: blue;
  color: white;
}

/* Мадыфікатар disabled для блока кнопка */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}