BEM Nedir ?

BEM (Block Element Modifier) css metodolojisidir. Bir stil adlandırma kuralıdır. 2009 yılında Yandex geliştiricileri tarafından geliştirilmiştir.

Adlandırma yapma çoğunlukla zaman alan ve geçiştirilerek yapılan bir iştir. Fakat adlandırmayı doğru yapmak ileride karşılaşacak birçok problemin çözümü niteliğindedir. BEM adlandırma yapmayı belli standartlar altına almıştır.

Adlandırma kuralının birincil amacı geliştiriciler için mümkün olduğunca bilgilendirici olmasıdır. Şimdi Block Element Modifier isimlerinin nereden geldiğini göstererek kuralı anlatmaya çalışacağım.

Block:

Blocklar genelde büyük yapılardır. İçerisinde birçok ögeyi barındırırlar. Sitedeki tekrar kullanılabilir parçalardan oluşur.

Twitter sayfasındaki işaretli kısımlardan da gördüğünüz üzere .header block, .left-side block, .right-side block, .main block kısımlarından oluşuyor. Ayrıca blocklar başka blockları da kapsar. bknz: .header

.header block

.header block içinde .nav block

.header block içinde .logo block

.header block içinde .search block

Blok adı genelde .navigation gibi tek bir kelimedir, ancak daha uzun blok tanımınız varsa tek bir tire ile bölerek yapabilirsiniz(.left-side gibi).

‼️️ÖRNEK KULLANIM 
<!-- HTML -->
<header> 
   <nav class="navigation">
      . . .  
   </nav>  
</header>
/* CSS */
header nav.navigation{
        . . .
}
/* CSS BEM */
.navigation{
        . . .
}

Element:

Elementler block içerisinde bulunan elemanlardır.

.search block

.search block içerisinde search-twitter element, profile-picture element, tweet element kısımlarından oluşuyor.

‼️️ÖRNEK KULLANIM
<!-- HTML -->
<header> 
   <div class="search">
      <input class="search__search-twitter" type="text" name="search" placeholder="Search Twitter">
      <img class="search__profile-picture" src="images/profile.png">
      <button class="search__tweet" type="button"> Tweet </button>  
   </div>  
</header>
/* CSS */
div.search button.search__tweet{
        . . .
}
/* CSS BEM */
.search__tweet{
        . . .
}

Modifier:

Elemanın varsayılan durumuna ek stiller tanımlanmasını sağlar.

.search__tweet

‼️️ÖRNEK KULLANIM
<!-- HTML -->
<header> 
   <div class="search">
      <button class="search__tweet search__tweet--error" type="button"> Tweet </button>  
   </div>  
</header>
/* CSS */
div.search button.search__tweet--error{
        . . .
}
/* CSS BEM */
.search__tweet--error{
        . . .
}

Adlandırma Kuralı :

➩ İsimler küçük harfle başlamalıdır.

➩ #id selector kullanmayın sadece .class kullanın.

➩ Element adı block adından __ ile ayrılır (.block__element).

➩ Modifier element/block adından — ile ayrılır (.block__element — modifier ya da .block — modifier).

⚠️ Tage birden fazla class ekleneceği zaman diğer class isimlendirmeleri şu şekilde olmalıdır:

“.block — color”, “.block__element — color” ya da “.block — element-color”.

<!-- HTML -->
<div class = ”block__element block--color”>
   . . . 
</div>
/* CSS */
.block--color{
   . . .
}

⚠️ İç içe olan kullanımlarda __ ile isimlendirme yapsakta birden fazla olduğu durumlarda bir __ daha ekleyip isimlendirme yapmak yanlış olur.

Yanlış Kullanım:

<!-- HTML -->
<div class = ”block”>
   . . .
   <span class = ”block__element”>
      . . .
      <a class = ”block__element__link”> . . . </a>
   </span>
</div>

Doğru Kullanım:

<!-- HTML -->
<div class = ”block”>
   . . .
   <span class = ”block__element”>
      . . .
      <a class = ”block__link”> . . . </a>
   </span>
</div>

BEM Kullanmak…

• Kodun tekrar kullanılabilirliği ve kolay anlaşılırlık sağlıyor.
• Html’i daha okunabilir kılıyor.
• Bem adlandırması eşsizdir. Bem adlandırması tüm teknolojilerde (html, css, javascript) aynıdır.
• BEM, iç içe geçmiş CSS seçicilerini ortadan kaldırır. Her HTML öğesinin kendi css sınıfı vardır ve adıyla amacının ne olduğunu biliyorsunuzdur.
• Tasarıma baktığınızda nelerin block-element ve modifier olduğunu analiz edebilirsiniz.
• Bem styntax’ı daha çabuk css kodlamızı sağlar.
• Html tagleri ile iç içe yapılan işlemler bir güncelleme ile işleri zorlaştırırken bem kullanarak tek class ismi ile her şey daha kolay gerçekleşir.
• Bem syntax kullanırsanız yandex’in bunun için toolları mevcut.
• Sass ve Less gibi css pre-processor’lar için de bem üretmek oldukça kolay.
• Adlandırmalar uzun fakat hepsi okunabilir ve anlaşılabilirdir.

Bem ile uzunca bir class ismi oluşturabilir. Peki “html dosya boyutları uzun css class adlarıyla büyümüyor mu?” derseniz eğer EVET büyüyor. LAKİN gzip gibi dosya küçültme araçları kullanırsanız bu sorunu ortadan kaldırmış olursunuz.

bem website : http://getbem.com/

Diğer Css Metodolojileri hakkında bilgi almak isterseniz aşağıdaki linkleri tıklayın.

OOCSS | SMACSS