Mik az előnyei a BEM módszertannak?

BEM (Blokk, Elem, Modifikátor) – CSS osztálynevezési módszertan, amely az interfész független blokkokra való felosztásán alapul.

Előnyök:

• Modularitás: Lehetővé teszi az újrahasznosítható interfészkomponensek létrehozását, amelyek függetlenek egymástól.
• Karbantarthatóság: A világos névstruktúrának köszönhetően könnyebb megtalálni és módosítani a stílusokat anélkül, hogy más részeket érintenénk.
• Skálázhatóság: Nagy projektekhez alkalmas, sok fejlesztővel, mivel csökkenti az osztálynevek ütközésének kockázatát.
• Átláthatóság: Az osztálynevek tükrözik az elemek szerkezetét és funkcióját, javítva a kód olvashatóságát.
• Előrejelezhetőség: A blokk stílusai nem függenek a kontextustól, így elkerülhetők a váratlan viselkedések.
• Izoláció: Egy blokk stílusai nem befolyásolják más blokkok stílusait.

Példa:

/* Gomb blokk */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid blue;
}

/* Gombon belüli ikon elem */
.button__icon {
  margin-right: 5px;
}

/* Primary módosító a gomb blokkhoz */
.button--primary {
  background-color: blue;
  color: white;
}

/* Disabled módosító a gomb blokkhoz */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}