BEM metodologiyasının üstünlükləri nələrdir?

BEM (Blok, Element, Modifier) – CSS sinif adlandırma metodologiyası, interfeysi müstəqil bloklara bölməyə əsaslanır.

Üstünlüklər:

• Modulyarlıq: İnterfeys komponentlərini yaratmağa imkan verir ki, bunlar bir-birindən müstəqil şəkildə təkrar istifadə oluna bilsin.
• Baxım asanlığı: Aydın adlandırma strukturu sayəsində, üslubları tapmaq və dəyişdirmək daha asandır, digər hissələrə təsir etmədən.
• Əlavə edilə bilənlik: Böyük layihələr üçün uyğundur, çox sayda inkişafçı ilə işləyərkən sinif adlarının toqquşma riskini azaldır.
• Aydınlıq: Sinif adları elementlərin quruluşunu və məqsədini əks etdirir, kodun oxunaqlığını artırır.
• Əvvəlcədən proqnozlaşdırıla bilənlik: Blokların üslubları kontekstdən asılı deyil, bu da gözlənilməz davranışları aradan qaldırır.
• İzolyasiya: Bir blokun üslubları digərinin üslublarına təsir etmir.

Nümunə:

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

/* Button içindəki icon elementi */
.button__icon {
  margin-right: 5px;
}

/* Button bloku üçün primary modifikasiyası */
.button--primary {
  background-color: blue;
  color: white;
}

/* Button bloku üçün disabled modifikasiyası */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}