Jaké jsou výhody metodologie BEM?

BEM (Blok, Element, Modifier) – metodologie pojmenovávání tříd CSS založená na rozdělení rozhraní na nezávislé bloky.

Výhody:

• Modularita: Umožňuje vytvářet komponenty rozhraní, které lze znovu použít nezávisle na sobě.
• Udržovatelnost: Díky jasné struktuře pojmenování je snazší najít a upravit styly, aniž by se ovlivnily ostatní části projektu.
• Škálovatelnost: Vhodné pro velké projekty s mnoha vývojáři, protože snižuje riziko konfliktů v názvech tříd.
• Přehlednost: Názvy tříd odrážejí strukturu a účel prvků, což zlepšuje čitelnost kódu.
• Předvídatelnost: Styly bloku nezávisí na kontextu, což vylučuje neočekávané chování.
• Izolace: Styly jednoho bloku neovlivňují styly jiného.

Příklad:

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

/* Element ikona uvnitř bloku tlačítko */
.button__icon {
  margin-right: 5px;
}

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

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