BEM metodolojisi nedir?

BEM (Blok, Öğe, Modifikator) — CSS'te ölçeklenebilir ve sürdürülebilir kod oluşturmak için sınıf isimlendirme metodolojisidir. Amacı, bileşenleri bağımsız, yeniden kullanılabilir ve kolayca değiştirilebilir hale getirmektir.

Temel ilkeler:

Blok: Bağımsız bileşen, benzersiz bir isme sahiptir. Öğeleri ve diğer blokları içerebilir.
```
<div class="card">...</div>
```
Öğe: Blok dışında bağımsız anlamı olmayan bloğun bir parçası. Öğenin adı, blok adından iki alt çizgi (__) ile ayrılır.
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modifikator: Blok veya öğeye durum ekler veya görünüm/davranışını değiştirir. Modifikatorun adı, blok veya öğe adından iki tire (--) ile ayrılır.
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Avantajlar:

Okunabilirlik: Sınıflar kolayca anlaşılır, bileşenin yapısı görünür.
Yeniden kullanılabilirlik: Bileşenler bağımsızdır ve projede farklı bölümlerde kullanılabilir.
Bakım kolaylığı: Bir bileşende yapılan değişiklikler diğerlerini minimum düzeyde etkiler.
Ölçeklenebilirlik: Büyük ekipler ve projeler için uygundur.

Örnek yapı:

.card {
  /* Blok stilleri */
}

.card__title {
  /* Öğe stilleri */
}

.card__text {
  /* Öğe stilleri */
}

.card--featured {
  /* Blok modifikator stilleri */
}

.button {
  /* Blok stilleri */
}

.button--primary {
  /* Blok modifikator stilleri */
}

.button--disabled {
  /* Blok modifikator stilleri */
}