Aké sú výhody metodológie BEM?

BEM (Blok, Element, Modifier) – metodológia pomenovania CSS tried založená na rozdelení rozhrania na nezávislé bloky.

Výhody:

• Modularita: Umožňuje vytvárať komponenty rozhrania, ktoré je možné znovu použiť nezávisle od seba.
• Udržiavateľnosť: Vďaka jasnej štruktúre pomenovania je jednoduchšie nájsť a upraviť štýly bez ovplyvnenia iných častí projektu.
• Škálovateľnosť: Vhodné pre veľké projekty s viacerými vývojármi, pretože znižuje riziko konfliktov v názvoch tried.
• Prehľadnosť: Názvy tried odrážajú štruktúru a účel prvkov, čo zlepšuje čitateľnosť kódu.
• Predvídateľnosť: Štýly bloku nie sú závislé od kontextu, čo vylučuje neočakávané správanie.
• Izolácia: Štýly jedného bloku neovplyvňujú štýly iného.

Príklad:

/* Blok tlačidlo */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid blue;
}

/* Element ikona vnútri bloku tlačidlo */
.button__icon {
  margin-right: 5px;
}

/* Modifikátor primary pre blok tlačidlo */
.button--primary {
  background-color: blue;
  color: white;
}

/* Modifikátor disabled pre blok tlačidlo */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}