Ի՞նչ է BEM մեթոդաբանությունը։

BEM (Բլոկ, Էլեմենտ, Մոդիֆիկատոր) — CSS-ում դասերի անվանման մեթոդոլոգիա՝ ընդարձակելի և հեշտ սպասարկվող կոդ ստեղծելու համար: Նրա նպատակն է դարձնել կոմպոնենտները անկախ, վերաօգտագործելի և հեշտ փոփոխվող:

Հիմնական սկզբունքներ՝

• Բլոկ: Անկախ կոմպոնենտ, որը ունի յուրահատուկ անուն: Կարող է պարունակել էլեմենտներ և այլ բլոկներ:

  <div class="card">...</div>
  

• Էլեմենտ: Բլոկի մաս, որը ինքնուրույն նշանակություն չունի բլոկի կոնտեքստից դուրս: Էլեմենտի անունը բաժանվում է բլոկի անունից երկու ստորակետով (__):

  <div class="card">
    <h2 class="card__title">...</h2>
    <p class="card__text">...</p>
  </div>
  

• Մոդիֆիկատոր: Ավելացնում է վիճակ կամ փոխում է բլոկի կամ էլեմենտի տեսքը/գործողությունը: Մոդիֆիկատորի անունը բաժանվում է բլոկի կամ էլեմենտի անունից երկու հինիշով (--):

  <button class="button button--primary button--disabled">...</button>
  <div class="card card--featured">...</div>
  

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

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

Նմուշային կառուցվածք՝

.card {
  /* Բլոկի ոճեր */
}

.card__title {
  /* Էլեմենտի ոճեր */
}

.card__text {
  /* Էլեմենտի ոճեր */
}

.card--featured {
  /* Բլոկի մոդիֆիկատորի ոճեր */
}

.button {
  /* Բլոկի ոճեր */
}

.button--primary {
  /* Բլոկի մոդիֆիկատորի ոճեր */
}

.button--disabled {
  /* Բլոկի մոդիֆիկատորի ոճեր */
}