BEM nedir, nasıl kullanılmalıdır?

BEM yani Block Element Modifier 2009 yılında yandex geliştiricileri tarafından hazırlanmış görsel okunabilirliği ve adapte olmayı kolaylaştıran yazım sitilidir.

BEM adlandırma yapısında bazı kalıplar mevcuttur. Bu kalıpları kullanırken amaç geliştiriciler için anlaşılır, bilgilendirici ve ferah olmasını sağlamaktır. Dilerseniz kelime kelime BEM’in ne anlama geldiğini birlikte bakalım.

BLOCK

Block ingilizcede herkesin bildiği gibi blok demektir. Bu bloklar WEB sitelerinde belirli başlı yerlerde büyük veya küçük alanları kapsayabilirler.

Bu blokları isimlendirirken, blokların bulunduğu yerlerin konumuna göre isimlendirilmesi hem belirli standartlar altında kalınmasını hem de geliştiriciler için BEM kuralına uyulmasında yardımcı oluyor.

Örneğin sosyal medya platformlarında BEM kuralını sıkça görmek mümkün. Örnek vercek olursak .header block, .left-side block, .right-side block, .main block gibi isimlendirmeler görebiliriz.

Ayrıca bu block isimleri kendi aralarında da başka blockları oluşturabilir. Örneğin .header block içerisinde .nav block yine .header block içerisinde .search block gibi.

ELEMENT

Element ise yine ingilizceden bildiğimiz gibi eleman anlamını taşıyor. Yani blocklar içerisinde bulunan elemanlara deniyor.

Örneğin .search block içerisindeki .search__icon eleman gibi.

MODIFIER

Modifier ise ingilizce değiştirici demek.

Örneğin siz block içerisindeki bir elemana ekstra bir özellik vermek istiyorsanız modifier yazım şeklini kullanarak isimlendirme yapmalısınız.

Örnek olarak. .search block içerisindeki .search__icon elamanını .search__icon–success veya .search__icon–error gibi.

 

Adlandırma Yaparken Dikkat edilmesi gerekenler

• Adlandırmadaki isimler küçük harfle başlanmalı.
• #id etiketi yerine .class kullanılmalı.
• Modifier element/block adından — ile ayrılır. (.block__element — modifier ya da .block — modifier)
• Modifier kullanımlarda yalnızca bir kere __ kullanılır.

 

Yanlış
<!– HTML –>
<div class = ”block”>
. . .
<span class = ”block__element”>
<a class = ”block__element__link”> . . . </a>
</span>
</div>

 

Doğru
<!– HTML –>
<div class = ”block”>
. . .
<span class = ”block__element”>
<a class = ”block__link”> . . . </a>
</span>
</div>

 

GENEL OLARAK

• Yazılan kodların tekrar tekrar kolay bir şekilde kullanılmasında yardımcı oluyor.
• Geliştiriciler için daha rahat ve hızlı bir şekilde okunabilir olmasını sağlıyor.
• BEM adlandırmasını html, css, JavaScript gibi tüm teknolojilerde kullanabiliriz.
• CSS kısmına baktığımızda hangilerinin Block, hangilerinin Modifier, hangilerinin Element olduğunu rahatça anlayabiliriz.
• Adlandırmalar uzun fakat hepsi okunabilir ve anlaşılabilirdir.

Ayrıca birbirinden güzel rahatlatıcı ve odaklayıcı sesleri dinlemek için Sound AIR adlı yazımı okuyabilirsiniz.