BEM
BEM metodolojisini anlamaya çalışalım. BEM Nedir ? , BEM’i Neden Kullanmalıyım? , BEM Nasıl Kullanırım? sorularına kendimizce cevap verelim.
1- BEM NEDİR ?
BEM (BLOCK__ELEMENT — MODIFIER) CSS metodolojisidir.
BEM , HTML ve CSS’deki sınıflar için popüler bir adlandırma kuralıdır. Yandex tarafından 2009 da geliştirilmiştir. Karmaşık arayüz yapılarını doğru adlandırarak yeniden kullanılabilir şekilde geliştirmeye olanak sağlar.😍
2-BEM’i NEDEN KULLANMALIYIM ?
Bir projeye başlarken bazen olaylar çok dallanıp budaklanır ve adlandırma yapmak gerçekten çok karmaşık bir hale girer hatta günün sonunda kendinizi spagetti bir kod yığınının içinde bile bulabilirsiniz. Bu karmaşayı önlemek adına güzel bir çözüm olmuş diyebiliriz kısaca.
Adlandırma işi genelde çok önemsenmeyen bir konudur. Ama aslında adlandırmayı doğru şekilde yapmak bize birçok yönden avantaj sağlar. İlerde oluşabilecek karmaşıklığı önlemek , CSS çakışmalarını önler ,CSS performansını arttırır. Performans mı nasıl yani ? 😊
Tarayıcılar css seçicilerini sağdan sola doğru okurlar. Birden fazla iç içe seçiciyi varsa performansı olumsuz etkiler .
Örnek :
<div class=”menu menu-item menu-item-icon”></div>
yada BEM’le oluşturacak olursak bu yapıyı;<div class=”menu__item-icon”></div>
seçici CSS tarafında kod işenirken daha performanslı olacaktır.
Eee sadece avantajı mı var yani dezavantajı da vardır illa derseniz var. 🙂
CSS seçicilerinin genellikle uzun olmasından dolayı dosya boyutumuz artar ama unutmamak lazım ki kodlar bilgisayarlar için değil insanlar içindir.
Yazdığımız kodları bilgisayarlar her türlü okur önemli olan insanlar yani geliştirici vatandaşların rahat okuması ve anlaması.
3-BEM NASIL KULLANILIR ?
Öncellikle ana kuralımız adlandırmamızın mümkün olduğunca bilgilendirici olmalıdır. 💗 BEM yani BLOCK__ELEMENT — MODIFIER nerden geliyor bu kuralları inceleyelim.
Yukarıdaki card tasarımını örnek alarak üzerinden uygulamalı gidelim. 🙂
BLOCK: Arayüz üzerinde tek başına bir bütün oluşturan yapılardır. İçerisinde birden fazla ögeyi barındırır ve tekrar kullanılabilir bir yapıdadırlar. Adlandırmak için anlamsal bir class ismi yeterlidir .Block adı genelde tek kelimeden oluşur ama daha uzunsa adlandırmanız tek tire (-) ile bölerek yapabilirsiniz. Örneğin (.right-side) gibi. Burda block card ‘ın kendisi oluyor.
ELEMENT: Elementler ,block nesnesinin içerisinde yer alırlar.Class isminden sonra iki alt tire ( __ ) kullanılıp element adı eklenir. Burda elementlerimiz solda bir resmimiz var adlandıracak olursak (card__img) ve sağda accordion yapımız var adlandırma olarak (card__accordion) diyebiliriz.
MODIFIER: Elemanımızın varsayılan halinden farklı bir stil uygulamamız gerektiğinde kullanırız. Mesela aktif-pasif durumları gibi. iki tire ( — ) kullanıp modifier adını yazarız. Burada sağda accordion kısmında 2. soruda aktif olmuş ve yazı rengi ve kalınlığı değişmiş bunun için seçicimiz (card__accordion — active) şeklinde olacaktır.
CSS görünümü:
SASS görünümü:
