CSS Academy · Ders

BEM: Blok Öge Değiştirici Adlandırması

Öngörülebilir ve yeniden kullanılabilir class adları oluşturmak için Block-Element-Modifier metodolojisini uygulayın.

BEM: Blok Öge Değiştirici Adlandırması, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. 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, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

BEM nedir?

BEM (Block–Element–Modifier), kendini açıklayan sınıf adları oluşturan bir adlandırma kuralıdır. CSS bileşenlerini öngörülebilir ve kendi kendini belgeleyen hâle getirir.

Blok

Blok, bağımsız olarak var olabilen, tek başına anlamlı bir kullanıcı arayüzü bileşenidir. Bileşenin kök sınıfıdır.

  <div class="card">Card block</div>
  <nav class="nav">Nav block</nav>
  <button class="button">Button block</button>
  <form class="search-form">Search form block</form>

Öğe

Öğe, bir bloğun dışında anlamı olmayan alt öğesidir. Öğelerde çift alt çizgi kullanılır: .block__element.

  <div class="card">
    <div class="card__image">Image</div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
    </div>
  </div>
  <nav class="nav">
    <div class="nav__item"><a class="nav__link" href="#">Link</a></div>
  </nav>

Değiştirici

Değiştirici, bir bloğun veya öğenin varyasyonu ya da durumudur. Değiştiricilerde çift tire kullanılır: .block--modifier.

  <button class="button button--primary">Primary</button>
  <button class="button button--large">Large</button>
  <div class="card card--featured">Featured Card</div>
  <nav class="nav">
    <div class="nav__item nav__item--active">Active Item</div>
  </nav>

Eksiksiz BEM örneği

BEM adlandırması kullanılan bir kart bileşeni:

  <div class="card card--featured">
    <div class="card__image" role="img" aria-label="Card image"></div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
      <p class="card__text">Content</p>
      <a class="button button--primary card__action" href="#">Read More</a>
    </div>
  </div>

BEM CSS yapısı

BEM kartı için karşılık gelen CSS:

  <div class="card card--featured">
    <div class="card__image" role="img" aria-label="Card image"></div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
      <p class="card__text">Content</p>
      <a class="button card__action" href="#">Read More</a>
    </div>
  </div>

BEM'in özgüllük avantajı

BEM sınıflarının tamamı tek sınıftır (özgüllük 0,1,0). Hiçbir seçici diğerinden daha özgül değildir; bu nedenle geçersiz kılma işlemi kolaydır: doğru değiştirici sınıfı eklemeniz yeterlidir.

Yaygın BEM hataları

Şu BEM tuzaklarından kaçının:

Çok düzeyli öğeler: .card__body__title — .card__title biçiminde düzleştirin
HTML'de kendi bloklarının dışında bulunan öğeler
.nav__link a gibi öğe seçicileri kullanmak — gereksiz özgüllük ekler

CSS özel özellikleriyle BEM

BEM ile CSS değişkenleri doğal bir şekilde birlikte kullanılabilir. Değiştiricilerin geçersiz kılacağı blok düzeyinde belirteçler tanımlayın:

  <button class="button">Default</button>
  <button class="button button--danger">Danger</button>

BEM ne zaman kullanılmamalı?

BEM ayrıntılıdır ve yardımcı sınıflar ya da tek seferlik stiller için ideal değildir. Tailwind gibi Utility-First çerçeveler BEM'in yerini tamamen alır. Anlamsal adlandırmanın önemli olduğu özel bileşen kitaplıklarında BEM kullanın.

Uygulamada BEM

Birçok tasarım sistemi BEM varyasyonlarını veya benzer adlandırma şemalarını kullanır. Belirli söz diziminden çok tutarlı ilke önemlidir: blok → öğe → değiştirici, derin iç içe geçirme yok, düz özgüllük.

Hızlı kontrol

BEM'de, bir "card" bloğunun içindeki "title" adlı öğeyi hangi söz dizimi temsil eder?

Özet

BEM, Blok, Öğe ve Değiştirici adlandırmasını kullanır: .block__element--modifier. Düz ve eşit özgüllük sağlamak için tüm sınıflar tek sınıftır. Öğeler (__) kendi bloklarının içinde yer alır. Değiştiriciler (--) varyasyonlar oluşturur. .card__body__title gibi derin iç içe geçirmelerden kaçının; .card__title biçiminde düzleştirin.

Sıkça Sorulan Sorular

“BEM: Blok Öge Değiştirici Adlandırması” dersi ücretsiz mi?

Evet — “BEM: Blok Öge Değiştirici Adlandırması” 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 CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“BEM: Blok Öge Değiştirici Adlandırması” dersinde ne öğreneceğim?

Öngörülebilir ve yeniden kullanılabilir class adları oluşturmak için Block-Element-Modifier metodolojisini uygulayın. CSS 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.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS 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 2. dersidir.

“BEM: Blok Öge Değiştirici Adlandırması” 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 CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS 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

← CSS Academy Sayfasına Dön