BEM (Blok, Eleman, Değiştirici) Nedir ve Drupal Emulsify Twig ile nasıl kullanılabilir?

Yayınlanan: 2022-11-08

Açık kaynaklı teknolojiler ve yazılımlarla çalışırken, kodunuzu okumak ve anlamak için gereken çabayı basitleştirmek daha da önemlidir. İyi bir adlandırma kuralı, kod incelemeleri sırasında sözdizimi ve stil tercihlerine odaklanmak yerine daha büyük sorunları çözmenize yardımcı olur. Deneyimli geliştiriciler, tonlarca stil öğesi içeren daha büyük web siteleriyle çalışırken iyi yazılmış ve organize edilmiş kodun önemini anlıyor.

BEM (Block, Element, Modifier) metodolojisi, sunduğu kullanım kolaylığı nedeniyle popülerlik kazanan CSS sınıfları için yaygın olarak kullanılan bir adlandırma kuralıdır. BEM'in temel konsepti, bileşen tabanlı web geliştirmedir. BEM, özellikle karmaşık kullanıcı arayüzüne sahip büyük projelerle uğraşırken arayüz geliştirmeyi kolay ve hızlı hale getirir. BEM hakkında daha fazlasını ve Drupal Emulsify Twig modülüyle nasıl çalışabileceğini keşfedelim.

BEM nedir

BEM metodolojisi, CSS sınıflarına daha kolay erişilmesi, anlaşılması ve ölçeklendirilmesine yardımcı olmak için tanıtıldı. Geliştirme sürecini hızlandırabilir ve yeniden kullanılabilir bileşenlerin oluşturulmasına yardımcı olabilir.

BEM üç bölümden oluşur:

Engellemek
eleman
değiştirici

Engellemek

Bloklar en dıştaki ve işlevsel olarak bağımsız bileşendir ve yeniden kullanılabilir. Örnekler: üst bilgi, alt bilgi, kenar çubuğu, menü, içerik vb.

Özellikler:

Blok adları her zaman bloğun amacını yansıtmalıdır.
Bloklar kenar boşluğu veya pozisyon kullanmamalıdır. Kenar boşluğu veya konum eklemeniz gerekiyorsa, bunu iç kaplara uygulamanız gerekir.
BEM'i kullanırken CSS etiketleri veya kimlik seçicileri kullanmayın.

Örnek:

 <div class=”icon-button”></div>

eleman

Öğeler, bir Bloğun alt öğeleridir. Her eleman sadece bir bloğa sahip olabilir ve bunun dışında kullanılamaz. Örnekler: menü öğeleri, liste öğeleri, giriş alanı vb.

Özellikler:

Öğe adı (sınıf), durumunu (küçük/kırmızı) değil amacını (başlık, başlık) açıklamalıdır.
Öğe ve blok, çift alt çizgi (__) ile ayrılır. Bunun gibi: blok-adı__eleman-adı.

Örnek:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element in the `icon-button` block → <div class=”icon-button__icon”>Icon Image</div> </div>

değiştirici

Bir blok veya öğenin görünümünü, durumunu veya davranışını tanımlayabileceğiniz bir sınıf adı. Örnekler: kırmızı, büyük, devre dışı, sabit vb.

Özellikler:

Değiştirici adı, görünümünü açıklar. Örneğin, görünüm “_large” ise, değiştirici sınıf icon-button__title_large olacaktır .
Değiştirici, bloktan veya öğeden tek bir alt çizgi (_) ile ayrılır.

Örnek:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element with modifier in the `icon-button` block → <div class=”icon-button__icon_large”>Icon Image</div> </div>

Değiştirici türleri

1. Boole

Boolean değerinin durumunu kontrol edebilir ve onu bir değişkene ayarlayabilirsiniz. Bu değişken değiştirici bir değer olarak geçebilir.

2. Anahtar/değer çifti

Anahtar/değer çiftiyle birlikte değiştiricinin tam adının yapısı şu kalıplardan birini izleyecektir:

blok-adı_değiştirici-adı_değiştirici-değeri
blok-adı__element-adı_modifier-name_modifier-değeri

Adlandırma Kuralları: Kurallar ve Şemalar

Farklı adlandırma şemaları vardır. Tüm şemaların aşağıdaki gibi bazı ortak kuralları vardır:

İsimler küçük Latin harfleriyle yazılır.
Sözcükler kısa çizgi (-) ile ayrılır.

1. Klasik Adlandırma Şemaları

Klasik adlandırma şeması, BEM'in varsayılan adlandırma şemasıdır.

Blok-adı__elem-adı_mod-adı_mod-val

Öğe adı ve blok adı, çift alt çizgi (__) ile ayrılır.
Değiştirici adı ve blok veya öğe adı, tek bir alt çizgi (_) ile ayrılır.
Değiştirici değeri ve değiştirici adı, tek bir alt çizgi (_) ile ayrılır.

2. İki Çizgi Adlandırma stili

blok-adı__elem-adı--mod-adı--mod-val

Öğe ve blok adı, çift alt çizgi (__) ile ayrılır.
Blok ve eleman bir çift tire (--) ile ayrılır.
Bir değiştirici ve değiştiricinin değeri, çift kısa çizgi (--) ile ayrılır.

3. CamelCase Adlandırma Stili

blockName-elemName_modName_modVal

İlk kelimeden sonraki her kelime büyük harfle başlar.
Bloklar, elemanlar ve değiştiriciler, standart adlandırma şemasındakiyle aynı şekilde kullanılır.

4. Tepki Adlandırma Stili

BlockName-ElemName_modName_modVal

Blok ismi ve eleman isimleri büyük harfle başlar.
Değiştiricinin adı küçük harfle başlar.
Bir öğe adı ve blok adı, tek bir kısa çizgi (-) ile ayrılır.
Değiştiricilerin adları ve değerleri, standart şemadakiyle aynı şekilde ayrılır.

Emulsify Twig modülü ile Drupal'da BEM

Drupal içerisinde Emulsify Twig modülü yardımıyla BEM Twig fonksiyonunu kullanabiliriz. BEM işlevi, bileşenlerdeki öğeler üzerinde BEM sınıfları oluşturmanıza olanak tanır. Aşağıda bazı BEM Twig uzantıları ve kullanımları belirtilmiştir.

1. Basit blok adı (gerekli argüman):

Bu oluşturur:

2. Değiştiricilerle engelleyin:

Birden çok değiştirici eklemek istiyorsanız, bunu bir dizi kullanarak yapabilirsiniz.

Bu oluşturur:

3. Değiştiriciler ve blok adı içeren öğe (isteğe bağlı):

Bu oluşturur:

4. Blok adı olan ancak değiştirici içermeyen öğe (isteğe bağlı):

Bu oluşturur:

5. Blockname, değiştiriciler ve ekstra sınıflara sahip öğe:

Bu oluşturur:

6. Yalnızca ekstra sınıflara sahip öğe (isteğe bağlı):

Bu oluşturur:

Öznitelik Ekle Dal Uzantısı

Öznitelik ekle Twig işlevi, bileşenlerinizin öğelerine HTML öznitelikleri eklemenize olanak tanır. Aşağıdaki bazı Nitelik Ekle işlevlerine bir göz atın:

 {% set additional_attributes = { "class": ["icon-button", "icon-button__title"] } %} <div {{ add_attributes(additional_attributes) }} ></div> {% set additional_attributes = { "class": bem("icon", ["small", "red"], "icon-button"), } %} <div {{ add_attributes(additional_attributes) }}></div>

Son düşünceler

BEM metodolojisi, teslim edilmesi ve anlaşılması kolay olan daha kaliteli kod yazmak ve sürdürmek isteyen geliştiriciler için son derece yararlıdır. Her elemanın isminden ve hangi bloktan geldiği ile kolayca tanımlanabilen bir amacı vardır. Doğru kullanıldığında, BEM kullanmanın geliştirme hızını artırabileceğini göreceksiniz. Okuduklarınızı beğendiyseniz, size doğrudan gelen kutunuza taze, son derece sıcak bilgiler göndereceğimiz haftalık bültenimize kaydolun!