⏳ Özet: BEM (Block - Element - Modifier) metodolojisi scalable ve maintain edilebilir css yazmak yandex için tarafından ortaya atılan isimlendirme standartıdır. BEM'in temeli component bazlı ve tekrar kullanılabilir css kodu yazmaya dayanır.

İsimlendirme programlama dünyasında her zaman zor ve kafa karıştırcı olmuştur. Hal böyle olunca zaman zaman bu konuyu ihmal edebiliyoruz. Bu da uzun vadede kodumuzun kalitesini ve okunabilirliğini olumsuz etkileyebilir. Özellikle css yazarken gerekli özveriyi göstermediğimiz durumlarda code base'imiz çöplüğe dönüşebiliyor. BEM daha okunabilir, yönetilebilir ve HTML ile doğrudan ilişkili css kodu yazmak için uyguladığımız metodolojidir.

BEM Block, Element, Modifier olmak üzere 3 adet konsepte dayanır. Bu konseptleri kısaca açıklayalım.

• Block: Uygulamanızdaki yeniden kullanılabilir bileşen topluluğudur. Örneğin card, footer, menu, form block grubuna dahil edilebilir.

• Element: Block içerisinde bulunan ve block'tan ayrı kullanılmayan child bileşenlerdir. Element oluşturmak için iki adet alt çizgi kullanılır. Örneğin .card__image, .menu__item, .form__label gibi...

• Modifier: Block veya Element'lerin farklı varyasyonlarını üretmek için kullanılır. Modifier oluşturmak için iki kısa çizgi kullanılır. Örneğin .card--vertical, .menu__item--active gibi...

💡 Formülize edecek olursak BEM metodolojisine uygun bir element .[block]__[element]--[modifier] şeklinde isimlendirilebilir.

Bootstrap card componentini inceleyelim ve BEM metodolojisini kullanmaya çalışalım.

<!-- https://getbootstrap.com/docs/4.1/components/card -->
<div class="card">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

.card ve .btn seçicilerini Block, .card seçicisi altındaki elemanları Element, .btn-primary seçisini de Modifier olacak şekilde güncelleyelim.

<div class="card">
  <img class="card__img-top" src=".../100px180/" alt="Card image cap">
  <div class="card__body">
    <h5 class="card__title">Card title</h5>
    <p class="card__text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn--primary">Go somewhere</a>
  </div>
</div>

Css tarafında da aşağıdaki gibi bir güncelleme yapabiliriz.

// card.scss
.card {
  &__img-top {}

  &__body {}

  &__title {}

  &__text {}
}

// button.scss
.btn {
  &--primary {}
}

Bir accordion menü oluşturacağımızı düşünelim. Bu accordion menüyü BEM'e göre aşağıdaki gibi yapabiliriz.

<div class="accordion">
  <div class="accordion__item">
    <div class="accordion__item__title">
      Accordion Title 1
      <span class="accordion__item__icon">+</span>
    </div>
    <div class="accordion__item__content">
      Accordion İçerik 1
    </div>
  </div>
  <div class="accordion__item">
    <div class="accordion__item__title">
      Accordion Title 2
      <span class="accordion__item__icon">+</span>
    </div>
    <div class="accordion__item__content">
      Accordion İçerik 2
    </div>
  </div>
</div>

.accordion  {
  &__item {
    &__title {}

    &__icon {}

    &__content {}
  }
}

BEM hakkında yeterince bilgi sahibi olduğumuza göre avantajlarına ve dezavantajlarına bakalım.

BEM Kullanmanın Avantajları

• CSS çakışmalarını önler.
• HTML ve CSS arasındaki bağımlılığı kaldırır.
• CSS performansını arttırır.
  • Tarayıcılar css seçicilerini sağdan sola doğru okurlar. Birden fazla nested yani iç içe seçici kullanmak performansı olumsuz yönde etkiler. Örneğin .accordion .accordion-item .accordion-item-icon gibi bir seçici yerine BEM ile oluşturacağımız .accordion__item__icon seçicisi tarayıcının css kodunu işleyebilmesi açısından daha performanslı olacaktır.

BEM Kullanmanın Dezavantajları

• CSS seçicilerinin genellikle uzun olmasından dolayı dosya boyutunu arttırır.
• Göreceli olarak uzun seçici isimlerinden dolayı bir html kodunun çirkin görünmesine neden olur.