Tutarlı bir amacı olduğunda ve uygulamasını üst bloktan bağımsız olarak üstlenebildiğinde bir BEM öğesini bileşene dönüştürün. Sınıfları yeniden adlandırmadan veya CSS’yi taşımadan önce bu sınırı sınamak için aşağıdaki yerel Mac alıştırmasını kullanın.

Bir öğeyi bağımsız kılan nedir?

Yazılmış bir HTML sayfasını sürdüren biri için pratik soru, büyüyen bir bölümün üst öğesinin parçası olarak kalması mı, yoksa ayrı olarak sürdürülen bir bloğa mı dönüşmesi gerektiğidir. BEM, bloğu mantıksal ve işlevsel açıdan bağımsız bir bileşen olarak tanımlar; öğe bir bloğa aittir ve ondan bağımsız kullanılamaz. Bloklar başka bloklar içerebilir. Temel kavramlar

workbench bloğu içeren yapay bir sayfayı ele alalım. Bu bloğun workbench__preview öğesi soyut bir şekil, bir etiket ve bir açıklama içeriyor. Başlangıçta bu üçü yalnızca çalışma tezgâhına hizmet ediyor. Daha sonra aynı önizlemeye dar bir shelf alanında ihtiyaç duyuluyor. Bu ikinci yerleşim, somut bir çıkarma görevi sunuyor: Önizlemenin kendi görünümü ve iç yapısıyla bir shape-tile bloğuna dönüşüp dönüşemeyeceğini belirleyin.

Derinlik tek başına belirleyici değildir. BEM, DOM’da iç içe öğelere izin verirken adlarını düz tutar: workbench__preview, workbench__label ve workbench__caption. workbench__preview__caption gibi bir ad, yanlış biçimde başka bir öğeye ait bir öğeyi ifade eder. Resmî hızlı başlangıç kılavuzu, karmaşık bir öğenin iç parçalarının bağımsız olarak düzenlenmesi gerektiğinde hizmet bloğunu da bir seçenek olarak kabul eder. Hızlı Başlangıç

Okunabilirlik için biçimlendirmeyi ayrı bir şablona taşımakla yeni bir BEM bloğu oluşturmak arasında yararlı bir ayrım vardır. İlk değişikliği, ikincisine hemen karar vermeden yapabilirsiniz. Çıkarılan parçanın neyi üstlendiğini, barındırıcısının ne sağladığını ve başka bir yerleşimde nasıl kullanılacağını açıklayabildiğinizde blok sınırını belirginleştirin.

Çıkarmadan önce bağımlılıkları sınayın

Aşağıdaki karar yardımı, BEM’in bağımsızlık ilkesinden türetilmiş editoryal bir yöntemdir. Resmî bir puanlama sistemi değildir. Tüm sayfayı bir kerede değerlendirmek yerine, tek bir aday alt ağaca uygulayın.

Soru Çıkarmayı destekleyen kanıt Öğeyi yerinde tutma nedeni
Açık bir amacı var mı? “Bir şekli etiket ve açıklamayla gösterir” Amacı yalnızca “çalışma tezgâhının iç sarmalayıcısı”dır
Kendi iç sunumunu üstlenebilir mi? Kenarlığı, boşlukları ve tipografisi birlikte taşınır Bu kurallar üst öğenin yapısından ayrılamaz
Barındıran öğe yerleşimi ayrı olarak sağlayabilir mi? Barındıran öğe kullanılabilir alanı ve çevresindeki boşlukları kontrol eder Aday, belirli bir ata düzenine ihtiyaç duyar
Çeşitlemeleri kendisini mi tanımlıyor? Kompakt bir kutucuk, birden çok yerleşimde anlamlıdır Her çeşitleme belirli bir üst öğenin adını taşır
Ayrı bakım şimdi yarar sağlar mı? İkinci bir yerleşim veya önemli bir iç sorumluluk vardır Çıkarma, şu an kullanılmayacak bir arayüz ekler

Kodu değiştirmeden önce tek bir cümle yazın: “shape-tile kendi şeklini, etiketini, açıklamasını ve iç boşluklarını üstlenir; barındıran öğe yerleşimi ve kullanılabilir genişliği üstlenir.” Bu cümle çalışma tezgâhının sütun düzenini veya kardeş öğelerin sıralamasını da içerecek şekilde uzuyorsa, sınırın nerede olması gerektiğini yeniden değerlendirin.

Dış düzeni iç görünümden ayrı tutun. BEM’in CSS kılavuzu, dış geometri ve konumlandırmayı üst öğe üzerinden tanımlar ve bağımsız bir blok sınıfının aynı düğümde üst öğenin öğe sınıfıyla birlikte kullanılmasını gösterir. Bu birleşime mix denir. CSS metodolojisi

Örneğin class="shape-tile workbench__preview" her iki kimliği de ifade edebilir. shape-tile kenarlığını ve iç düzenini, workbench__preview ise konumunu tanımlasın. Bilerek tanımlanmış bir sözleşmenin parçası olmadığı sürece aynı özelliği her iki kimlik üzerinden de atamaktan kaçının.

Mac’inizde yerel bir karşılaştırma oluşturun

Bu alıştırma için yeni bir klasör oluşturun; böylece çıkarılmış tasarımı mevcut bir sayfayı değiştirmeden karşılaştırabilirsiniz. Düz metin düzenleyicisine ve masaüstü tarayıcısına ihtiyacınız var; örnek paket kurulumu, JavaScript, indirilmiş yazı tipi veya görsel dosyası gerektirmiyor.

TextEdit’te File > New seçin, ardından Format > Make Plain Text seçeneğine tıklayın. Aşağıdaki HTML’yi yapıştırın ve index.html adıyla kaydedin; sorulursa Use .html seçeneğini belirleyin. Apple bu adımları belgeliyor ve HTML’yi Ignore rich text commands seçeneğiyle kaynak kodu olarak nasıl yeniden açabileceğinizi de açıklıyor. Mac’te TextEdit ile HTML belgeleri üzerinde çalışma

HTML belgesinin tamamını oluşturun

Bu belge, önerilen bileşeni iki farklı barındıran öğede kullanıyor. Tüm etiketler yapaydır ve soyut şekil CSS ile çizilir. Aşağıdakileri index.html adıyla kaydedin.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape tile boundary exercise</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="demo">
  <h1>Shape tile boundary exercise</h1>
  <main class="demo__regions">
    <section class="workbench">
      <h2>Workbench A</h2>
      <div class="shape-tile workbench__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form A</h3>
          <p class="shape-tile__caption">Rounded sample, first arrangement.</p>
        </div>
      </div>
    </section>
    <section class="shelf">
      <h2>Shelf B</h2>
      <div class="shape-tile shelf__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form B</h3>
          <p class="shape-tile__caption">Rounded sample, second arrangement.</p>
        </div>
      </div>
    </section>
  </main>
</body>
</html>

Stil sayfasının tamamını ekleyin

Aynı klasörde styles.css adlı başka bir düz metin dosyası oluşturun. Gerçek dosya adının styles.css.txt değil, styles.css olduğundan emin olun. Stil sayfasının tamamını yapıştırın:

/* Page and host styles */
.demo {
  margin: 0 auto;
  padding: 24px;
  max-width: 960px;
  font-family: system-ui, sans-serif;
  background: #f1f3f5;
  color: #243047;
}
.demo__regions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.workbench,
.shelf {
  box-sizing: border-box;
  padding: 16px;
  max-width: 100%;
  border: 1px dashed #6b778a;
}
.workbench { width: 480px; }
.shelf { width: 256px; }
.workbench__preview { margin-top: 24px; }
.shelf__preview { margin-top: 12px; }

/* Independent component styles */
.shape-tile {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #718096;
  border-radius: 12px;
  background: #fff;
  color: #243047;
  font: 16px/1.5 system-ui, sans-serif;
}
.shape-tile__shape {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 16px 24px 12px 24px;
  background: #536dbe;
}
.shape-tile__content {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shape-tile__label {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.shape-tile__caption { margin: 6px 0 0; }

index.html dosyasını Safari’de veya başka bir masaüstü tarayıcısında açın. Karşılaştırmada geniş bir çalışma tezgâhı ve daha dar bir raf görmelisiniz. Kutucukların bileşen stilleri aynıdır; kullanılabilir alan, şekil ile metnin yan yana sığıp sığmayacağını ya da alt satıra geçip geçmeyeceğini belirler.

Kaynak sözleşmesi burada önemlidir: rel="stylesheet" harici bir stil sayfası kaynağı tanımlar, href="styles.css" ise bu belgenin ihtiyaç duyduğu dosyayı belirtir. BEM sınıfı eklemek bu kaynak bağlantısını oluşturmaz. Alıştırmayı taşırken iki dosyayı birlikte tutun. HTML Standardı bu stil sayfası ilişkisini tanımlar. HTML Standardı: “stylesheet” bağlantı türü

Çıkarmanın işe yaradığını nasıl anlarsınız?

Karşılaştırmayı tanılayıcı bir alıştırma olarak kullanın. Aşağıdaki beklenen sonuçlar, verilen koddan çıkarılmıştır; bunlar tarayıcınızda yapmanız gereken kontrollerdir, bildirilmiş tarayıcı testi sonuçları değildir.

  1. Temel görünümü kontrol edin. Her iki kutucukta da beyaz arka plan, mavi yuvarlatılmış şekil, etiket ve açıklama görünmelidir. Her şey biçimlendirilmemiş görünüyorsa bileşen sınırını değerlendirmeden önce stil sayfasının dosya adını ve bağlantısını kontrol edin.
  2. Yerleşim sınıflarından birini kaldırın. İlk kutucuktan workbench__preview sınıfını silin, kaydedin ve sayfayı yeniden yükleyin. İç görünümü bozulmadan üst boşluğu değişmelidir.
  3. Barındıran öğe sınıflarından birini kaldırın. İçeren bölümden workbench sınıfını geçici olarak kaldırın. Barındıran öğenin çerçevesi ve sabit genişliği kaybolmalı, kutucuk bileşen stillerini korumalıdır.
  4. Paylaşılan bileşeni değiştirin. .shape-tile içindeki kenarlık yarıçapını değiştirin. Her iki örnek de, barındıran öğe seçicilerini düzenlemeden değişmelidir.
  5. İçeriği zorlayın. Açıklamalardan birini daha uzun, yapay bir cümleyle değiştirin ve tarayıcı penceresini daraltın. Metnin satırlara nasıl dağıldığını ve tamamının görünür kalıp kalmadığını kontrol edin.

Hataları sorumluluklara göre yorumlayın. Barındıran öğe sınıfını kaldırdıktan sonra kenarlığın kaybolması, bileşen stilinin hâlâ barındıran öğe seçicisine ait olabileceğini gösterir. Beklenmedik çevre boşlukları, yerleşim kurallarına işaret eder. Metin farklılıkları devralınan stilleri veya genel seçicileri ortaya çıkarabilir. Başka bir geçersiz kılma eklemeden önce sorumlu bağımlılığı düzeltin.

BEM adlandırması, tarayıcı tarafından zorlanan bir stil yalıtımı oluşturmaz. CSS’de kalıtım belge ağacı boyunca sürer: geçiş sıralaması öğe için bir değer sağlamadığında, kalıtılan özellikler değerlerini üst öğeden alır. Bu durum CSS Cascading and Inheritance belirtiminde tanımlanmış ve MDN’de örneklenmiştir. CSS Cascading and Inheritance Module Level 5, bölüm 7.2, Kalıtım

Örnek, kutucuğun kökünde yazı tipini ve metin rengini özellikle ayarlar. Gerçek bir sayfada sitenin tipografisini devralmak isteyebilirsiniz. Bunu bir bağımlılık olarak kaydedin. Bağımsızlık, gerekli ortamın anlaşılır ve taşınabilir olması demektir; her bileşende tarayıcının tüm varsayılanlarını yeniden oluşturmak zorunda değildir.

Bunun yerine öğeyi ne zaman yerinde tutmalısınız?

Adayın anlamı ve uygulaması üst öğeye özgü kalıyorsa onu bir öğe olarak tutun. Yalnızca çalışma tezgâhında kullanılan bir hizalama sarmalayıcısının birçok alt öğesi olabilir; yine de ayrı bir genel kimliğe ihtiyacı olmayabilir. Yeni bir blok eklemeden önce BEM adlarını düzleştirin ve düzenini iyileştirin.

Buna karşılık, iç sorumluluğu önemli ve bağımlılık sınırı açık olduğunda yalnızca bir kez kullanılan bir bileşen bile çıkarılmaya değer olabilir. Yeniden kullanımı zorunlu bir sayı olarak değil, destekleyici kanıt olarak değerlendirin. Bu alıştırmada ikinci yerleşim sınırı incelemeyi kolaylaştırıyor; evrensel bir iki kez kullanım kuralı oluşturmuyor.

Barındıran öğeye özgü çeşitlemeler biriktiren bir çıkarımı da yeniden değerlendirin. shape-tile--inside-workbench gibi adlar, yerleşimin bileşen arayüzünün parçası hâline geldiğini düşündürür. Önce farkın workbench__preview içinde yer alıp almadığını sorun. Bileşen çeşitlemesini, yalnızca bileşenin kendi terimleriyle açıklayabildiğiniz bir fark için kullanın.

Modern CSS kapsam belirleme kararı değiştirir mi?

@scope kuralı, kapsam içindeki seçicilerin nerede eşleşeceğini sınırlayabilir; bu, belge alt ağacındaki seçicileri yönetmeye yardımcı olabilir. MDN şu anda bu özelliği Baseline 2026 olarak işaretliyor ve Mart 2026’dan bu yana güncel tarayıcı sürümlerinde kullanılabildiğini belirtiyor; ancak eski aygıtların veya tarayıcıların desteği olmayabileceğini de ekliyor. Her Mac kurulumunun bunu desteklediğini varsaymayın. @scope CSS kuralı

Verilen alıştırma sıradan sınıf seçicileri kullanıyor ve @scope gerektirmiyor. Kapsam belirleme desteği olmayan tarayıcıları desteklerken temel bileşen stillerini bu kurallarda tutun. Kapsam belirleme, bir sınırı ifade etme biçiminizi iyileştirebilir; ancak sahiplik kararı yine bileşenin amacının, bağımlılıklarının ve yerleşiminin açıkça anlatılmasını gerektirir.

Karmaşık öğeyi, amacını ve iç uygulamasını birlikte taşıyabildiğinizde, çevresindeki düzeni barındıran öğeye bıraktığınızda ve sonucu başka bir bağlamda gösterebildiğinizde çıkarın. Bu sorumluluklar birbirine dolanmış durumdaysa, onları netleştirene kadar öğeyi yerinde tutun; yalnızca sınıf adını kısaltmak yeniden düzenlemeyi tamamlamaz.

Kaynaklar