BEM Metodolojisine Giriş

BEM Metodolojisi Nedir?

Daha küçük web siteleri oluştururken, stillerinizi nasıl düzenlediğiniz genellikle büyük bir sorun değildir. Her zamanki dosyalarınızı yaratırsınız, gerekli tüm CSS'yi yazarsınız, hepsi bu. Ancak, daha büyük, daha karmaşık projeler söz konusu olduğunda, kodunuzu nasıl düzenlediğiniz çok önemli hale gelir. Birden çok ön uç ve arka uç geliştiriciden oluşan bir ekipte çalışıyorsanız, kodun nasıl yapılandırıldığı daha da önemlidir.

Bugün, CSS kodunu azaltmayı ve CSS kodunuzu daha sürdürülebilir hale getirmeyi amaçlayan birçok metodoloji var. Bu yazıda bunlardan bir tanesini açıklayıp birkaç örnek vereceğim: BEM. BEM , B kilidi Öğe Değiştirici anlamına gelir. Arkasındaki ana fikir, geliştirme sürecini hızlandırmak ve CSS sınıflarını bağımsız modüller halinde düzenleyerek geliştiricilerin ekip çalışmasını kolaylaştırmaktır. header__form--search gibi bir sınıf adı gördüyseniz, bu BEM iş başındadır. Evet, sınıflar çok uzun adlandırılabilir, ancak hepsi okunabilir ve anlaşılabilir.

En iyi uygulamanın, kimliklerle değil, yalnızca sınıflarla BEM kullanmak olduğunu unutmayın, çünkü sınıflar gerekirse adları tekrarlamanıza ve daha tutarlı kodlama yapısı oluşturmanıza izin verir. Ayrıca, web sitenizi organize modüllere bölmek istiyorsanız, aynı yapıdan oluşmalıdır: blok, öğe ve değiştirici. Her bloğun birden fazla elemanı olabileceği ve hem blok hem de elemanların birden çok değiştiricisi olabileceği. Ancak önce temel BEM yapısı ile başlayalım ve örneklerle açıklayalım.

Engellemek

Blok, web sitenizdeki bir nesneyi temsil eder. Bunu kodunuzun daha büyük yapısal parçaları olarak düşünün. Bugün her web sitesindeki en yaygın bloklar başlık, içerik, kenar çubuğu, alt bilgi ve aramadır. BEM'deki bloklar, her zaman CSS sınıflarınızı zincirleme bir başlangıç ​​noktasıdır. Birkaç blok örneğine bir göz atın:

• bir içerik
• menü
• bir arama formu

 .content {/* Styles */} .menu {/* Styles */} .search {/* Styles */}

eleman

Bir öğe, belirli bir işlevi yerine getiren blok içindeki bir bileşendir. Yalnızca bloğu bağlamında anlamlı olmalıdır:

• içerik makalesi
• bir menü öğesi
• bir arama giriş alanı

 .content__article {/* Styles */} .menu__item {/* Styles */} .search__input {/* Styles */}

değiştirici

Değiştirici, bir bloğun varyasyonlarını nasıl temsil ettiğimizdir. Bootstrap kullandıysanız, en iyi örnek düğme boyutları olacaktır. Düğme boyutları, düğmenin kendisinin yalnızca boyut varyasyonlarıdır, bu da onu değiştirici yapar:

• içerik özellikli makale
• bir menü bağlantısı
• simgesi olan veya olmayan bir arama alanı

 .content__article--featured {/* Styles */} .menu__item--link {/* Styles */} .search__input--icon {/* Styles */}

Adlandırma Kuralları

BEM metodolojisinin birincil amacı, CSS seçicilerinin adlarını olabildiğince bilgilendirici ve şeffaf hale getirmektir. Orijinal BEM stili şu şekilde tanımlanır:

Blok adı genellikle .header gibi tek bir kelimedir, ancak daha uzun blok tanımınız varsa tek bir kısa çizgi - bölünür:

 .lang-switcher {/* Styles */}

Öğe adı çift alt çizgi __ ile başlar:

 .lang-switcher__flag {/* Styles */}

Değiştirici adı tek alt çizgi _ ile başlar:

 .lang-switcher__flag_basic {/* Styles */}

BEM metodolojisinde sadece çok kritik bir kural vardır - bir değiştirici, sahibinin bağlamı dışında kullanılamaz.

Örnek vermek:

 .btn_big {/* Styles */}

btn_big yalnızca başlık da tanımlanmışsa kullanabilirsiniz.

Kötü örnek:

 <div class=”btn_big”>...</div>

İyi örnek:

 <div class=”btn btn_big”>...</div>

Bu orijinal BEM stillerinin yanı sıra Harry Roberts ve CamelCase stilleri gibi alternatif adlandırma şemaları da vardır.

Harry Roberts tarzı örnek:

 .block-name__element-name--modifier-name {/* Styles */}

CamelCase stili örneği:

 .BlockName__ElementName_ModifierName {/* Styles */}

Birkaç tane daha var, ama bu ikisi en yaygın olanlarıdır. Şahsen, Harris Roberts tarafından önerilen ve aşağıdaki kurallara sahip olan adlandırma kuralının hayranıyım:

• İsimler küçük harfle yazılır
• BEM varlıklarının adları içindeki sözcükler bir tire ile ayrılır -
• Bir öğe adı, bir çift alt çizgi __ ile bir blok adından ayrılır
• Boole değiştiricileri çift tire ile sınırlandırılmıştır --
• Anahtar/değer türü değiştiricileri kullanılmaz

Bu adlandırma kuralının diğerlerinden çok daha iyi oluşturulmasının nedeni, değiştirici öğeyi diğerlerinden kolayca ayırt edebilmenizdir. Orijinal adlandırma kurallarında değiştirici şu şekilde tanımlanır:

 .block__element_modifier {/* Styles */}

Ama gördüğünüz gibi, tek ve çift alt çizgi arasında çok fazla fark yoktur. Öte yandan, çift tire temiz bir ayrım sağlar ve değiştiriciyi anında görebilirsiniz:

 .block__element--modifier {/* Styles */}

Farklı Formatlarda BEM Örneği

Lütfen CSS'nin yanı sıra BEM'in JSON, XML, ağaç dosyalarınızı veya yuvalamayı destekleyen herhangi bir formatı düzenlemede çok yararlı olduğunu unutmayın. BEM metodolojisini, kullanıcı arayüzünüzü oluşturmanın iyi bir yolu olarak düşünün.

BEM formatında yapılandırılmış aşağıdaki HTML'yi ele alalım:

 <header class=”header”> <img class=”header__logo”> <form class=”header__search-from”> <input class=”header__search-from__input” type=”input”> <button class=”header__search-from__button” type=”button”> </form> <div class=”header__lang-switcher”></div> </header>

Aynısı JSON ve XML formatı kullanılarak da elde edilebilir.

XML:

 <block:header> <block:logo/> <block:search-from> <block:input/> <block:button/> </block> <block:lang-switcher/> </block>

JSON:

 { block: 'header', content: [ { block: 'logo' }, { block: 'search-form', content: [ { block: 'input' }, { block: 'button' } ] }, { block: 'lang-switcher' } ] }

Bir BEM Projesinin Dosya Sistemi Organizasyonu

BEM'de dosyalarınızı doğru bir şekilde organize etmek çok önemlidir. BEM sadece size harika bir CSS sınıfları organizasyonu sağlamak ve onları tamamen anlaşılır kılmakla kalmaz, aynı zamanda size oldukça sürdürülebilir bir dosya yapısı da sunar. SASS dosyaları ile BEM dosya organizasyonu tekniğini kullanarak örnek bir proje alalım:

 blocks/ input/ __box/ --big/ input__box--big.scss input__box.scss button/ --big/ button--big.scss

Yukarıda da görebileceğiniz gibi, sadece ana klasörünüzün içindeki alt klasör yapısını görerek her şey net ve düzenli. Bu şekilde, sizden sonra kimin çalıştığı veya sizin birinin peşinde olup olmadığı hiç fark etmez, çünkü aynı kalıbı takip etmek inanılmaz derecede kolaydır.

BEM Projesinin Platformlara Bölünmesi

Dosyalarınızı BEM metodolojisi tekniklerini kullanarak düzenlemenin yanı sıra daha spesifik konulara da girebilirsiniz. Örneğin, tamamen duyarlı olacak bir web projesi oluşturuyorsanız ve istemci, mobildeki bazı blokların masaüstü cihazlardan tamamen farklı olduğunu belirttiyse, BEM klasör yapınızı platformlara bölmek en iyisi olacaktır. Çeşitli platformlarda düğmeleri düzenleme örneği:

 common.blocks/ button/ button.scss desktop.blocks/ button/ buttons.scss mobile.blocks/ button/ button.scss

Tüm projenizi BEM metodolojisini kullanarak düzenlemek istiyorsanız bunun sadece bir örnek olduğunu unutmayın. BEM yapısına sahip dosya ağacı, BEM'i doğru kullanmak için zorunlu değildir, sadece projenin bazı bölümlerinde BEM'i kullanabilirsiniz. Şimdiye kadar, her öğenin ve değiştiricinin dosyasını oluşturduğu bu katı BEM dosya yapısı organizasyonunu kullanmadım. Bunun yerine, öğelerinin ve değiştiricilerinin bildirildiği bloklar için bir dosya yapısı oluşturuyorum.

Uygulamada BEM

Artık adlandırma kurallarına aşina olduğunuz için, BEM metodolojisini pratikte göstereceğim. Diyelim ki bu HTML kodu iş başında:

 <a class=”btn btn--big btn--primary-color” href=”#” title=”Title”> <span class=”btn__price”>$3.99</span> <span class=”btn__text”>Product</span> </a>

Aşağıdaki CSS işaretlemesi uygulandığında:

 .btn__price {/* Styles */} .btn__text {/* Styles */} .btn--big {/* Styles */} .btn--primary-color {/* Styles */}

Şimdi, yanılmayın. Şimdiye kadarki örneklerimizde hemen hemen her zaman bir blok, öğe ve değiştiriciye sahiptik ve bu her zaman böyle olmak zorunda değil.

Örneğin, person adında bir bloğumuz olduğunu varsayalım. Bir kişinin bacakları ve elleri vardır, ayrıca kadın veya erkek olabilir. Bir erkeği sağ elle tanımlamak istersek, şöyle görünecektir:

 .person--male__hand--right {/* Styles */}

Artık BEM'in gerçek anlamını görebilirsiniz. Değiştiricinin cinsiyet olduğu bir kişiyi tanımladık. Bir insanın kadın ya da erkek olması önemli olmadığı için bir eli vardır ve el bir elementtir. Ve yine, her kişinin yine bir değiştirici olan sağ veya sol eli olabilir.

Başka bir durumda, genel insanı tek elle tanımlamak istersek, bunu şöyle yapacağız:

 .person__hand {/* Styles */}

Fark edebileceğiniz gibi, BEM'e alıştıktan sonra CSS ve HTML yapınızı onunla yapılandırmak çok kolay.

BEM'i CSS Ön İşlemcileriyle Kullanma

Şahsen, CSS ön işlemcilerinden birini kullanmadan yeni bir projeye başlamayı hayal edemiyorum. Hepinizin bildiği gibi önişlemciler harika bir şey ve bize birçok fayda sağlıyorlar ve en önemlisi BEM metodolojisi ile mükemmel bir uyum sağlıyorlar.

Aşağıdaki örnekte, SASS ile birlikte en tipik BEM örneğini görebilirsiniz:

 .person { &__hand {/* Styles */} &__leg {/* Styles */} &--male { /* Styles */ &__hand { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } &__leg { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } } &--female { /* Styles */ &__hand { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } &__leg { /* Styles */ &--left {/* Styles */} &--right {/* Styles */} } } }

SASS kodu aşağıdaki CSS'de derlenecektir:

 .person__hand {/* Styles */} .person__leg {/* Styles */} .person--male {/* Styles */} .person--male__hand {/* Styles */} .person--male__hand--left {/* Styles */} .person--male__hand--right {/* Styles */} .person--male__leg {/* Styles */} .person--male__leg--left {/* Styles */} .person--male__leg--right {/* Styles */} .person--female {/* Styles */} .person--female__hand {/* Styles */} .person--female__hand--left {/* Styles */} .person--female__hand--right {/* Styles */} .person--female__leg {/* Styles */} .person--female__leg--left {/* Styles */} .person--female__leg--right {/* Styles */}

Daha da ileri gitmek istiyorsanız, BEM için kullanışlı bir SASS karışımı kullanabilirsiniz:

 /// Block Element /// @param {String} $element - Element's name @mixin element($element) { &__#{$element} { @content; } } /// Block Modifier /// @param {String} $modifier - Modifier's name @mixin modifier($modifier) { &--#{$modifier} { @content; } }

Ve bunu şu şekilde kullanabilirsiniz:

 .person { @include element('hand') {/* Person hand */} @include element('leg') {/* Person leg */} @include modifier('male') { /* Person male */ @include element('hand') { /* Person male hand */ @include modifier('left') { /* Person male left hand */ } @include modifier('right') { /* Person male right hand */ } } } }

Aşağıdaki CSS çıktısını üretecek olan:

 .person__hand { /* Person hand */ } .person__leg { /* Person leg */ } .person--male { /* Person male */ } .person--male__hand { /* Person male hand */ } .person--male__hand--left { /* Person male left hand */ } .person--male__hand--right { /* Person male right hand */ }

Büyük olasılıkla bu kadar uzun bir kullanım durumunuz olmayacağını biliyorum, ancak bu, hem küçük hem de büyük ölçekli projelerde BEM'in nasıl kullanıldığına ve neden bu kadar güçlü olduğuna dair harika bir örnek.

BEM Projenize Başlamak

Resmi BEM belgelerinde açıklandığı gibi, kendi yeni BEM projenizi başlatmanın en kolay yolu mevcut GIT deposunu kullanmaktır. Basitçe Git klon komutunu kullanın:

 $ git clone https://github.com/bem/project-stub.git

Ardından, yeni oluşturulan dizine gidin ve tüm bağımlılıkları yükleyin:

 $ npm install

Gerekli tüm bağımlılıklar yüklenecek:

ENB kullanarak projeyi oluşturun:

 $ node_modules/.bin/enb make

Geliştirme için bir sunucu modu çalıştırın:

 $ node_modules/.bin/enb server

Sonuç olarak, aşağıdaki mesaj görünür:

 Server started at 0.0.0.0:8080

Bu, sunucunun hazır ve çalışır durumda olduğu anlamına gelir. Artık sonuçları şu adresten kontrol edebilirsiniz:

 http://localhost:8080/desktop.bundles/index/index.html

Gördüğünüz gibi, burada bulunan bemjson dosyasında tanımlanmış, önceden oluşturulmuş birçok öğe var:

 project-stub/desktop.bundles/index/index.bemjson.js

Localhost index.html dosyanızda gördüğünüz tüm HTML'yi oluşturan dosyanın mevcut yapısını görebilir ve keşfedebilirsiniz. Bir önceki bölümde anlattığımız “Person” BEM projemizi elde etmek için bu dosyayı değiştireceğiz. index.bemjson.js dosyasındaki kodun tamamını kaldırabilir (veya yorumlayabilir) ve bununla değiştirebilirsiniz:

 module.exports = { block: 'page', title: 'Person BEM', favicon : '/favicon.ico', head : [ { elem : 'meta', attrs : { name : 'description', content : '' } }, { elem : 'meta', attrs : { name : 'viewport', content : 'width=device-width, initial-scale=1' } }, { elem : 'css', url : 'index.min.css' } ], scripts: [{ elem : 'js', url : 'index.min.js' }], content: [ { block: 'person', content: [ { elem: 'male', content: [ { elem: 'leg', mods: {side: 'left'}, content: 'Male person leg -- left' }, { elem: 'leg', mods: {side: 'right'}, content: 'Male person leg -- right' }, { elem: 'hand', mods: {side: 'left'}, content: 'Male person hand -- left' }, { elem: 'hand', mods: {side: 'right'}, content: 'Male person hand -- right' } ] }, { elem: 'female', content: [ { elem: 'leg', mods: {side: 'left'}, content: 'Female person leg -- left' }, { elem: 'leg', mods: {side: 'right'}, content: 'Female person leg -- right' }, { elem: 'hand', mods: {side: 'left'}, content: 'Female person hand -- left' }, { elem: 'hand', mods: {side: 'right'}, content: 'Female person hand -- right' } ] }, ] } ] };

Şimdi, aşağıdaki HTML oluşturulacak:

 <div class="person"> <div class="person__male"> <div class="person__leg person__leg_side_left"> Male person leg -- left </div> <div class="person__leg person__leg_side_right"> Male person leg -- right </div> <div class="person__hand person__hand_side_left"> Male person hand -- left </div> <div class="person__hand person__hand_side_right"> Male person hand -- right </div> </div> <div class="person__female"> <div class="person__leg person__leg_side_left"> Female person leg -- left </div> <div class="person__leg person__leg_side_right"> Female person leg -- right </div> <div class="person__hand person__hand_side_left"> Female person hand -- left </div> <div class="person__hand person__hand_side_right"> Female person hand -- right </div> </div> </div>

Yukarıdaki koddan da görebileceğiniz gibi, biz sadece BEM'in bize sağladığı varsayılan ayarları kullandığımız için bu senaryoda varsayılan BEM kodlama şeması kullanılmıştır. Yeni sayfalar, bloklar oluşturmak veya BEM HTML'yi değiştirmek gibi keşfedebileceğiniz ve kullanabileceğiniz çok daha fazla komut ve seçenek vardır. Bu konuya fazla girmeyeceğim ve hepsi resmi BEM belgelerinde bulunabilir.

Avantajlar ve Endişeler

Avantajlar

• BEM, bakım için mükemmeldir. Büyük ölçekli bir projede birisinin peşinden kaç kez çalışmak zorunda kaldınız ve bilinmeyen bir şey çökmeden herhangi bir şeyi değiştirmekten çok korkuyorsunuz? BEM'i kullanırken, öğenin tam amacını ve hangi blokta görünebileceğini bilirsiniz.
• Sınıf adları mantıklı ve sezgiseldir ve ekibin her üyesi bu öğenin web sitesinde ne yaptığını bilir. BEM, bir projedeki herkese aynı sayfada olmaları için paylaşabilecekleri bildirimsel bir sözdizimi verir.
• BEM, iç içe CSS seçicilerini ortadan kaldırır. Her HTML öğesinin kendi CSS sınıfı vardır ve adından da amacının ne olduğunu bilirsiniz. Hepsine hükmedecek bir seçici .

Endişeler ve Yaygın Hatalar

• Yuvalamada çok derine inmeyin. Ana kural, ikiden fazla ebeveyn ve çocuk seviyesi kullanmamak olmalıdır.
• Blok kapsamınıza nereden başladığınız konusunda dikkatli olun. Buradaki yaygın bir hata, bir geliştiricinin blok kullanmasıdır, ancak daha sonraki geliştirme noktasında aynı bloğun ana ebeveyn bloğuna sahip olacağının farkında değildir, bu da muhtemelen yuvalama ile kuralı bozacaktır.
• SASS @extend'den kaçının . Bu konuda Harry Roberts'tan alıntı yapmak için:

Sass'ta sınıfları birbirine 'bağlamayarak' görünümde daha fazla sayıda kombinasyon oluşturabilirsiniz. HTML'nin çok daha iyi bir kağıt izi vardır, çünkü her sınıfın DOM'nin bir parçası üzerinde hareket ettiğini görebilirsiniz. Her yeni kullanıcı arayüzü oluşturmak istediğinizde yeni yer tutucu sınıflar (veya bunları birleştiren bildirim sınıfları) oluşturmanız gerekmediği için CSS'niz çok daha ince kalır.

Çözüm

BEM kodlama şemasını ilk gördüğümde ilk düşüncem şu oldu:

Bu sınıflar yazmak ve okumak için çok uzun.

Ama bir kez denedikten sonra artık onu kullanmadan yeni bir projeye başlamayı hayal edemiyorum. Benim için BEM, kod sürdürülebilirliğimi büyük ölçüde geliştirdi ve kesinlikle BEM tabanlı projeye "atılacak" her geliştiricinin tüm kod yapısını gerçekten hızlı bir şekilde yakalayacağını söyleyebilirim.

Tüm bunlara rağmen, sosyal ağlarda BEM hakkında çok fazla tartışma var. Bazıları, yalnızca varsayılan HTML iç içe öğeleri kullanmak yerine neden bu kadar uzun ad sınıfları yazmaları gerektiğini merak ederek BEM'in iyi olmadığını söylüyor. Pekala, kimse BEM'i sevmeniz gerektiğini söylemiyor, ancak gerçek şu ki, ön uç geliştiricilerin çoğu onu benimsiyor ve olağanüstü yararlı buluyor.