Ի՞նչ են BEM մեթոդաբանության առավելությունները։

BEM (Բլոկ, Էլեմենտ, Մոդիֆիկատոր) – CSS դասերի անվանման մեթոդաբանություն, որը հիմնված է ինտերֆեյսը անկախ բլոկների բաժանման վրա:

Առավելություններ՝

• Մոդուլայինություն: Հնարավորություն է ստեղծել ինտերֆեյսի կոմպոնենտներ, որոնք կարող են անկախ միմյանցից կրկնակի օգտագործվել:
• Կարգապահություն: Ապահովում է հստակ անվանման կառուցվածք, որը հեշտացնում է ոճերի որոնումը և փոփոխությունը՝ առանց մյուս մասերին ազդելու:
• Մեծացման հնարավորություն: Համապատասխանում է մեծ նախագծերի, որտեղ շատ ծրագրավորողներ են աշխատում, քանի որ նվազեցնում է դասերի անվանման բախումների ռիսկը:
• Հասկանալիություն: Դասերի անվանումները արտացոլում են տարրերի կառուցվածքը և նշանակությունը, ինչը բարելավում է կոդի ընթեռնելիությունը:
• Նախատեսելիություն: Բլոկի ոճերը կախված չեն կոնտեքստից, ինչը բացառում է անսպասելի վարքագիծը:
• Անջատում: Մի բլոկի ոճերը չեն ազդում մյուսների վրա:

Նմուշ:

/* Buton բլոկ */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid blue;
}

/* Buton-ի ներսում icon տարր */
.button__icon {
  margin-right: 5px;
}

/* Primary մոդիֆիկատոր բլոկի համար */
.button--primary {
  background-color: blue;
  color: white;
}

/* Disabled մոդիֆիկատոր բլոկի համար */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}