BEM (Block Element Modifier), Yandex tarafından geliştirilen bir CSS isimlendirme ve mimari metodolojisidir. Amacı, kodun okunabilir, yeniden kullanılabilir ve ölçeklenebilir olmasını sağlamaktır.

BEM'in Üç Bileşeni

1. Block (Blok)

Bağımsız, kendi başına anlamlı bir bileşendir.

.card { }
.menu { }
.header { }
.button { }
.search-form { }

Özellikler:

• Tekrar kullanılabilir
• Bağımsız çalışabilir
• İç içe yerleştirilebilir
• Kebab-case ile yazılır

2. Element (Eleman)

Blokun bir parçasıdır, blok dışında bağımsız anlamı yoktur. İki alt çizgi (__) ile gösterilir.

.card__header { }
.card__body { }
.card__footer { }
.card__title { }
.card__image { }

.menu__item { }
.menu__link { }
.menu__icon { }

Özellikler:

• Bloğun parçasıdır
• Blok olmadan kullanılamaz
• Sözdizimi: block__element

3. Modifier (Değiştirici)

Blok veya elementin görünümünü, durumunu veya davranışını değiştirir. İki tire (--) ile gösterilir.

/* Blok modifierleri */
.card--featured { }
.card--dark { }
.card--large { }

/* Element modifierleri */
.card__title--bold { }
.card__image--rounded { }

/* Durum modifierleri */
.button--disabled { }
.button--active { }
.menu__item--selected { }

Tam Yapı ve Kombinasyonlar

/* Block */
.product-card { }

/* Elements */
.product-card__image { }
.product-card__title { }
.product-card__description { }
.product-card__price { }
.product-card__button { }

/* Block Modifiers */
.product-card--featured { }
.product-card--sale { }
.product-card--out-of-stock { }

/* Element Modifiers */
.product-card__button--primary { }
.product-card__button--disabled { }
.product-card__price--discount { }

HTML'de Kullanım:

<!-- Basit kart -->
<div class="product-card">
  <img class="product-card__image" src="product.jpg" alt="">
  <h3 class="product-card__title">Ürün Adı</h3>
  <p class="product-card__description">Ürün açıklaması</p>
  <span class="product-card__price">₺299</span>
  <button class="product-card__button">Sepete Ekle</button>
</div>

<!-- Öne çıkan kart (modifier ile) -->
<div class="product-card product-card--featured">
  <img class="product-card__image" src="product.jpg" alt="">
  <h3 class="product-card__title">Ürün Adı</h3>
  <p class="product-card__description">Ürün açıklaması</p>
  <span class="product-card__price product-card__price--discount">₺199</span>
  <button class="product-card__button product-card__button--primary">
    Hemen Al
  </button>
</div>

<!-- İndirimli kart -->
<div class="product-card product-card--sale">
  <img class="product-card__image" src="product.jpg" alt="">
  <h3 class="product-card__title">Ürün Adı</h3>
  <p class="product-card__description">Ürün açıklaması</p>
  <span class="product-card__price product-card__price--discount">₺199</span>
  <button class="product-card__button">Sepete Ekle</button>
</div>

CSS Örneği

/* Block */
.product-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Elements */
.product-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.product-card__title {
  font-size: 1.5rem;
  margin: 15px 0 10px;
  color: #333;
}

.product-card__description {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
}

.product-card__price {
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
  color: #2c3e50;
  margin: 15px 0;
}

.product-card__button {
  width: 100%;
  padding: 12px;
  border: none;
  background: #3498db;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

/* Block Modifiers */
.product-card--featured {
  border: 3px solid #f39c12;
  box-shadow: 0 4px 16px rgba(243, 156, 18, 0.3);
}

.product-card--sale {
  position: relative;
  background: linear-gradient(135deg, #fff 0%, #fffaf0 100%);
}

.product-card--out-of-stock {
  opacity: 0.6;
  pointer-events: none;
}

/* Element Modifiers */
.product-card__price--discount {
  color: #e74c3c;
}

.product-card__button--primary {
  background: #27ae60;
  font-weight: bold;
}

.product-card__button--primary:hover {
  background: #229954;
}

.product-card__button--disabled {
  background: #95a5a6;
  cursor: not-allowed;
}

Önemli Kurallar ve İpuçları

❌ YANLIŞ Kullanımlar

/* Element içinde element YAPMAYINIZ */
.card__header__title { }  /* YANLIŞ */

/* Bunun yerine: */
.card__header { }
.card__title { }  /* Doğrudan block'a bağlı */

✅ DOĞRU Kullanımlar

/* İç içe elementler varsa düz yazın */
.modal { }
.modal__header { }
.modal__title { }      /* modal__header__title değil */
.modal__close-button { }
.modal__body { }
.modal__footer { }

Gerçek Dünya Örneği: Navigasyon Menüsü

<nav class="main-nav main-nav--dark">
  <div class="main-nav__logo">
    <img class="main-nav__logo-image" src="logo.svg" alt="Logo">
  </div>
  
  <ul class="main-nav__menu">
    <li class="main-nav__item main-nav__item--active">
      <a class="main-nav__link" href="#">Anasayfa</a>
    </li>
    <li class="main-nav__item">
      <a class="main-nav__link" href="#">Hakkımızda</a>
    </li>
    <li class="main-nav__item main-nav__item--dropdown">
      <a class="main-nav__link" href="#">Ürünler</a>
      <ul class="main-nav__submenu">
        <li class="main-nav__subitem">
          <a class="main-nav__sublink" href="#">Kategori 1</a>
        </li>
      </ul>
    </li>
  </ul>
  
  <button class="main-nav__button main-nav__button--search">
    Ara
  </button>
</nav>

.main-nav {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
}

.main-nav--dark {
  background: #2c3e50;
  color: white;
}

.main-nav__logo {
  margin-right: auto;
}

.main-nav__logo-image {
  height: 40px;
}

.main-nav__menu {
  display: flex;
  list-style: none;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.main-nav__item {
  position: relative;
}

.main-nav__item--active .main-nav__link {
  font-weight: bold;
  border-bottom: 2px solid #3498db;
}

.main-nav__item--dropdown:hover .main-nav__submenu {
  display: block;
}

.main-nav__link {
  text-decoration: none;
  color: inherit;
  padding: 8px 0;
  display: inline-block;
}

.main-nav__submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  list-style: none;
  padding: 10px 0;
  min-width: 200px;
}

.main-nav__button {
  padding: 10px 20px;
  border: none;
  background: #3498db;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.main-nav__button--search {
  margin-left: 20px;
}

BEM'in Avantajları

1. Spesifiklik sorunları yok - Her sınıf tek başına
2. Okunabilir - İsimden ne olduğu anlaşılıyor
3. Yeniden kullanılabilir - Bloklar bağımsız
4. Bakımı kolay - Değişiklikler izole
5. Takım çalışması - Herkes aynı sistemi kullanır
6. Ölçeklenebilir - Büyük projelerde kaos olmuyor

Ne Zaman BEM Kullanmalı?

✅ Uygun:

• Büyük projeler
• Takım çalışması
• Bileşen tabanlı tasarım
• Uzun vadeli projeler

❌ Gerekli değil:

• Küçük landing page'ler
• Prototype'lar
• Tek sayfalık projeler

BEM başta biraz karmaşık gelebilir, ama alıştıktan sonra CSS yazmayı çok daha organize ve keyifli hale getirir!