BEM Metodolojisi: Block Element Modifier
Kendini açıklayan, düşük özgüllüklü ve yeniden kullanılabilir bileşen stilleri oluşturmak için CSS sınıflarını Block__Element--Modifier kalıbıyla adlandırın.
BEM Metodolojisi: Block Element Modifier, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
BEM Nedir
BEM (Blok, Öğe, Değiştirici), stilleri öngörülebilir, yeniden kullanılabilir ve çakışmasız hâle getiren bir CSS adlandırma kuralıdır. Bileşen yapısını sınıf adlarına kodlayarak özgüllük savaşlarını ve yanlışlıkla oluşan stil çakışmalarını ortadan kaldırır.
Bloklar — Bağımsız Bileşenler
Blok, bağımsız ve yeniden kullanılabilir bir bileşendir: card, button, nav. Sınıf adı, tirelerle ve küçük harflerle yazılan blok adıdır.
<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>Öğeler — Bir Bloğun Parçaları
Öğe, tek başına bir anlam taşımayan ve bir Bloğun parçası olan yapıdır. Çift alt çizgi kullanın: block__element.
<div class="card">
<img class="card__image" src="..." alt="...">
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__description">...</p>
</div>
<footer class="card__footer">
<a class="card__link" href="...">Read more</a>
</footer>
</div>Değiştiriciler — Çeşitler ve Durumlar
Değiştirici, bir Bloğun veya Öğenin görünümünü ya da davranışını değiştirir. Çift tire kullanın: block--modifier veya block__element--modifier.
<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>
<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>BEM CSS Kuralları
BEM sınıfları düşük ve eşit özgüllüğe sahiptir; her biri yalnızca bir sınıf kullanır. Bu, stillerin kolayca geçersiz kılınmasını sağlar. Hiçbir zaman ID'ler veya iç içe öğe seçicileri kullanmayın; bunlar özgüllüğü öngörülemez biçimde artırır.
/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }
/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }Sass ile BEM
Sass'taki & üst seçicisi, BEM yazımını daha az ayrıntılı hâle getirir. Derlenmiş CSS, düz BEM ile aynıdır.
.card {
padding: 16px;
&__title {
font-size: 1.25rem;
font-weight: 600;
}
&__body {
color: var(--color-text-secondary);
}
&--featured {
border: 2px solid var(--color-brand);
}
}Ne Zaman Yeni Bir Blok Oluşturulmalı
Bileşen tek başına çalışabildiğinde ve farklı bağlamlarda yeniden kullanılabildiğinde yeni bir Blok oluşturun. Parça yalnızca belirli bir Bloğun içinde anlamlıysa Öğe oluşturun.
BEM İç İçe Yerleştirmeyi Önler
BEM, HTML ve CSS'te derin iç içe yerleştirmeyi önermez. Bir öğenin içindeki öğe yine block__element olur; block__element__subelement olmaz.
<!-- Correct: -->
<div class="card">
<div class="card__meta">
<time class="card__date">Jan 1</time>
</div>
</div>
<!-- Wrong: -->
<div class="card">
<div class="card__meta">
<time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
</div>
</div>BEM ve JavaScript
Davranış kancaları için JS'ye özgü ayrı bir sınıf kullanın: js- ön eki. Bu yaklaşım, stillendirme ile betik yazımını birbirinden ayırır; bir BEM sınıfını yeniden adlandırmanız JavaScript davranışını bozmaz.
<button class="btn btn--primary js-submit">Submit</button>
// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);BEM Bloklarını Birleştirme
Bir öğe, blokları birbirine bağımlı hâle getirmeden bağlama özgü stillendirme için birden çok blok sınıfına sahip olabilir.
<button class="btn btn--primary form__submit">Submit</button>BEM'in Sınırlamaları
Sınıf adları uzayabilir. BEM, genel stil tutarlılığının önemli olduğu büyük ekipler ve tasarım sistemleri için en iyi sonucu verir. Kapsamlandırılmış stillere sahip bileşen çerçevelerinde (React/Vue) BEM'in ad alanı avantajları daha az kritiktir.
Hızlı Kontrol
BEM'de card__title--truncated neyi ifade eder?
Özet: BEM
Blok: bağımsız bileşen. Öğe (çift alt çizgi __): bir bloğun parçası. Değiştirici (çift tire --): çeşit veya durum. Düşük ve eşit özgüllük. ID seçicilerinden ve derin iç içe yerleştirmeden kaçının. JavaScript kancaları için js- ön ekini kullanın. Sass'taki & BEM yazımını daha az ayrıntılı hâle getirir. Büyük ekipler ve tasarım sistemleri için mükemmeldir.
Sıkça Sorulan Sorular
“BEM Metodolojisi: Block Element Modifier” dersi ücretsiz mi?
Evet — “BEM Metodolojisi: Block Element Modifier” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“BEM Metodolojisi: Block Element Modifier” dersinde ne öğreneceğim?
Kendini açıklayan, düşük özgüllüklü ve yeniden kullanılabilir bileşen stilleri oluşturmak için CSS sınıflarını Block__Element--Modifier kalıbıyla adlandırın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“BEM Metodolojisi: Block Element Modifier” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- BEM Metodolojisi: Block Element Modifier
- CSS Modülleri: Kapsamlı Sınıf Adları
- CSS-in-JS: Styled-components ve Emotion
- Tailwind CSS: Önce Yardımcı Sınıflar Yaklaşımı