BEM ve CSS Metodolojileri
Günümüzde birçok javascript framework / library si arayüz render kısımlarında web component mimarisi ile çok yakından ilgileniyor. Vue, Single File Component yapısında ‘scoped’ parametresi ile sadece o komponent için çalışacak CSS’ler yazmanıza yardımcı olabiliyor. Bir başka taraftan Stenciljs gibi framework bağımsız web komponent derleyeciler hayatımıza giriyor.
Fakat bir başka yönden ise özellikle SEO kaygısı yüksek olan herhangi bir internet sitesinde Javascript renderi Business ekibine kabul ettirmek çok meşakkatli olabiliyor. Bu tarz durumlarda sayfalar klasik yöntemlerle geliştirmek durumunda kalınabiliyor.
Ama bu demek değil ki bir framework kullanmadan okunabilir ve sürdürülebilir bi yapıyı takip edemeyelim!
Önceki yazılarımızdan birisinde CSS mimarileri hakkında bir şeylerden bahsetmiştik. Şimdi ise orada kısaca bahsettiğimiz -sürdürülebilir yapılar için etkili bir yöntem- BEM hakkında biraz daha detaya girmeye çalışacağız.
BEM, Yandex tarafından geliştirilen komponent bazlı bir web geliştirme metodolojisidir. Karışık arayüz yapılarını kopyala-yapıştır yapmadan, yeniden kullanabilir şekilde ve hızlı sonuçlar alınarak geliştirmeye olanak sağlamayı hedefler.
Biraz önce bahsettiğim gibi tek bir yönden değil web geliştirme ortamını bir bütün olarak ele almayı tercih eder. Hatta i-bem.js isimli bir javascript kütaphanesi bulunmaktadır.
Biz ise sürdürülebilir bir yapı kurmak için BEM ile yapabileceğiniz temel kurallardan (çoğu zaman yeterli olacaktır) bahsedeceğiz.
BLOCK__ELEMENT — MODIFIER
BEM, CSS tarafında arayüzümüzde bulunan nesneleri 3 ana başlık altında toplar;
Block: Arayüz üzerinde diğer nesnelerden bağımsız tek başına bir bütün oluşturan arayüz elemanlarımızdır. Header elamanımız, iletişim formumuz vb. nesneler bizim blok nesnelerimizdir. Ana komponentlerimiz de diyebiliriz aslında. İsimlendirmek için anlamsal bir class ismi tanımlamak yeterlidir.
Element: Elementler, blok nesnelerin içerisinde yer alıp onların iç elementleri olan nesnelerdir. Class isminden sonra iki alt tire (“__”) kullanılıp gerekli metinsel ek getirilerek kullanılır.
Modifier: Arayüz elemanlarımızın farklı durumlardaki hali için yapısal olmayan değişikleri için kullanırız. Aktif-pasif , büyük-küçük element gibi örnekler verebiliriz. Art arda gelen iki orta çizgi (“ — ”) ve gerekli metinsel ek getirilerek kullanılır.
Yukarıda gördüğüz (Şekil 1) insan yapısının BEM’e uygun CSS’ini yazalım o zaman.
Burada;
İnsan = Block,
Pantolon, Kazak = Element,
Yeşil Kazak = Modifier konumundadır.
Bunları temsili olarak koda dökersek şöyle olur;
Aynı kodu SCSS ile daha güzel bir şekilde şöyle yazabiliriz;
Javascript İçin Neler Yapabiliriz?
Eğer bunu kullanmak durumunda kaldıysanız muhtemelen DOM manipülasyonu gerektiren bir proje üzerinde çalışıyorsunuz. Vanillajs, Jquery vb.
Burada aslında yapmamız gereken HTML tarafında bir seçici belirtirken bunun Javascript tarafında bir değişkene karşılık geleceğini belirtmemiz ve seçiciye CSS tarafında tanımlanacak tanımlar vermekten kaçınmamız gerekiyor.
Örnek vermek gerekirse;
<button class="btn-blue">Gönder</button><script>
$('.btn-blue').on('click', function(){
console.log('Form submit edildi.');
})
</script>
Yukarıda yer alan kullanımda butona mavi renk veren btn-blue class ı ile javascript tarafında bir fonksiyon oluşturuldu. Bu kodu yazmamızın üzerinden 1 ay geçtiğini ve artık buradaki butonun kırmızı olmasının istendiğini düşünelim.
Elimizde iki senaryo var;
1. btn-blue classına gidip sitil olarak arkaplanı kırmızı vereceğiz. Dünyanın en kötü yöntemi olabilir.
2. btn-blue classı yerine btn-red classı vereceğiz. Ardından btn-blue ile tanımladığımız javascript eventlerimiz çalışmayacak.
Oysaki HTML üzerinde bunun bir Javascript eventi yakalayacağını belirten ve asla sitil almayan bir class kullansaydık asla böyle bir şey başımıza gelmezdi. BEM’de bunu genellikle “js-” öneki ile çözüyoruz. Şöyle ki;
<button class="btn-blue js-btn-form-submit">Gönder</button><script>
$('.js-btn-form-submit').on('click', function(){
console.log('Form submit edildi.');
})
</script>
Böylelikle artık js önekini görünce bu class/id nin bir javascript nesnesine denk geldiğini biliyoruz. Sitil vermek için farklı classlarla işlem yapıyoruz. Sitil değişikliğinde Javascript bozulması gibi bir dertle karşılaşmamış oluyoruz.
Kısa Kısa Avantajları
- Okunabilir, tahmin edilebilir kod yapısı
- Sürdürülebilir kod yapısı
- İç içe geçmiş tanımlamalardan kurtulmuş kod yapısı
- Tekrar kullanılabilir, kopyala yapıştır azaltan kod yapısı
- Karmaşıklığı azaltan kod yapısı
SONUÇ
BEM, kodlarımızı organize etmek için bir araç. Zayıf olan yönleri ve alternatifleri olmakla beraber bahsettiğimiz tarzda projeler için yeterli olabilecek kapasiteye sahip.
Biz projemizde uygulamaya başladıktan sonra Back-end ekip arkadaşlarımızın HTML tarafında soru sormak için bize daha az geldiklerini fark ettik örneğin :) .
Burada önemli olan sürdürülebilir, okunabilir, tahmin edilebilir kod yazmak diyebiliriz aslında. Bu amaçları farklı geliştirme ortamları, farklı altyapılar için farklı araçlar ve best practice lerle gerçekleştirebilirsiniz.
CSS tarafında farklı alternatifler ve yaklaşımlar için ise ITCSS, SMACSS, OOCSS, Atomic CSS anahtar kelimeleri ile daha fazla kaynağa ulaşabilirsiniz.
Herhangi bir konuda iletişim kurmak isteyenler dev@hesapkurdu.com adresinden bize ulaşabilirsiniz.
İyi günler…
