← Blog · 14 Nisan 2026 · ConvertCaseHQ Ekibi · 5 dk okuma

CSS adlandırma kuralları: kebab-case, BEM ve ötesi

CSS sınıf adlarının çoğu küçük harfli kebab-case ile yazılır (.site-header, .price-tag), çünkü CSS kendi parçalarını da böyle adlandırır: background-color, font-size, flex-direction. BEM bunun üzerine sabit bir yapı kurar, block__element--modifier; böylece card__title--large gibi bir sınıf, hangi bileşene ait olduğunu, onun hangi parçası olduğunu ve hangi varyantı gösterdiğini size söyler.

Aşağıda: CSS'in hangi konularda büyük/küçük harfe duyarlı olduğu ve olmadığı, kebab-case'in neden varsayılan hâline geldiği, BEM'in adlandırma kurallarının gerçekte ne dediği ve başka bir yaklaşımın BEM'i ne zaman gereksiz kıldığı.

CSS'te neler büyük/küçük harfe duyarlıdır, neler değildir

CSS'in kendi sözdizimi ASCII aralığında büyük/küçük harfe duyarsızdır; yani COLOR: RED tam olarak color: red gibi çalışır. Üç şey farklı işler:

• Sınıf adları büyük/küçük harfe duyarlıdır. .Card, class="card" ile eşleşmez. Tek istisna quirks modundaki bir sayfadır; orada tarayıcılar sınıf adlarını büyük/küçük harfe bakmadan eşleştirir. Bu da her sayfaya <!DOCTYPE html> ile başlamak için bir neden daha.
• Özel özellikler (custom properties) büyük/küçük harfe duyarlıdır. --brand-color ve --Brand-Color iki ayrı değişkendir.
• HTML öğe ve nitelik adları duyarlı değildir. Bir HTML belgesinde DIV ve div aynı öğeleri seçer. XML'de farklı olurlardı.

Bunu bir daha hiç düşünmemenin en basit yolu, her sınıf adını ve özel özelliği küçük harfle yazmaktır. Diğer dillerin ve dosya sistemlerinin büyük/küçük harfi nasıl ele aldığı için büyük/küçük harf duyarlılığı karşılaştırmamıza bakın.

CSS sınıf adlarında kebab-case neden kazandı

CSS'te hiçbir şey sınıf adlarını kebab-case yazmaya zorlamaz. .cardTitle da .card_title da geçerlidir. Tirelerin mantıklı olmasının nedeni, bir sınıf adının çevresindeki her şeyin zaten tire kullanmasıdır: özellik adları, space-between gibi değerler ve aria-label ile data-user-id gibi HTML nitelikleri. Tirelerle dolu bir stil sayfasında duran camelCase bir sınıf, yazım hatası gibi görünür.

JavaScript'te ise kebab-case sorun çıkarır, çünkü tanımlayıcılarda tireye izin verilmez. Tarayıcı kendi durumlarını kendisi halleder: data-user-id, element.dataset.userId olarak okunur, background-color da element.style.backgroundColor olur. Sınıf adları genellikle dizge olarak kalır (classList.add("is-open")), bu yüzden bundan etkilenmezler.

İstisna, CSS Modules kullanımıdır. Bir CSS Module, sınıf adlarını JavaScript'e bir nesne olarak dışa aktarır; bu yüzden .card-title, styles["card-title"] olarak yazılmak zorundadır, .cardTitle ise daha derli toplu olan styles.cardTitle olur. Sınıf adlarını camelCase'e geçireceğimiz tek kurulum budur.

BEM adlandırması: block, element, modifier

BEM (Block, Element, Modifier, yani blok, öğe, değiştirici) Yandex'ten çıktı. Metodolojinin tarihçe sayfası çalışmaların kökenini 2005'e dayandırır, Yandex'in Lego 2.0 çerçevesinin Mart 2009'daki sürümünü BEM'in başlangıcı olarak gösterir ve açık kaynağa geçişi 2010'a tarihler. Adlandırma kuralları kısadır:

• Block (blok): tek başına anlamlı olan bağımsız bir bileşen; örneğin .card, .search-form ya da .menu.
• Element (öğe): bir bloğun, onun dışında anlamı olmayan bir parçası; adı blok, iki alt çizgi ve öğeden oluşur: .card__title, .menu__item.
• Modifier (değiştirici): görünümü, davranışı ya da durumu değiştiren bir işaret; adı blok ya da öğe, iki tire ve değiştiriciden oluşur: .card--featured, .card__button--disabled. Bir değiştirici anahtar ve değer de olabilir: .form--theme-xmas.

Her parçanın içindeki sözcükler tek tireyle ayrılır, .search-form__submit-button örneğindeki gibi. İşte eksiksiz bir bileşen:

<article class="card card--featured">
  <h2 class="card__title">Spring sale</h2>
  <p class="card__body">Everything 20% off this week.</p>
  <a class="card__button card__button--disabled" href="/sale">Shop now</a>
</article>

.card { border: 1px solid #ddd; padding: 1rem; }
.card--featured { border-color: gold; }
.card__title { font-size: 1.25rem; }
.card__button--disabled { opacity: 0.5; pointer-events: none; }

Klasik BEM ve iki tire stili

Metodolojinin resmî sitesi bem.info üzerinde değiştiriciler farklı görünür. Oradaki klasik şema değiştiricileri tek alt çizgiyle ayırır: menu_hidden, menu__item_visible, menu__item_type_radio. -- sürümü orada bir alternatif olarak, “Two Dashes style” (iki tire stili) adıyla listelenir ve getbem.com'un belgelediği de budur. İkisi de meşru BEM; yalnızca tek bir kod tabanında ikisini karıştırmayın. bem.info ayrıca tirelerle ilgili küçük bir püf noktasına dikkat çeker: bir HTML yorumunun içindeki çift tire doğrulamada hataya yol açabilir.

Yanlış uygulanması kolay BEM kuralları

1. Öğelerin öğesi olmaz. Bir kartın üst kısmındaki (header) başlık yine card__title olur, card__header__title değil. HTML'de öğeleri istediğiniz kadar derin iç içe koyabilirsiniz; adlar düz kalır. bem.info'nun gerekçesi şu: zincirleme adlarla, mevcut kodu değiştirmeden bir öğeyi taşıyamaz, ekleyemez ya da kaldıramazsınız.
2. Değiştiriciler asla tek başına durmaz. class="button--primary" değil, class="button button--primary" yazın. Değiştirici yalnızca temel sınıfa ekleme yapar.
3. Tek sınıflı seçiciler kullanın. .card .card__title ya da h2.card__title değil, .card__title. Kabul gören istisna, kendi öğelerini değiştiren bir blok değiştiricisidir: .card--featured .card__title.
4. Değiştiricileri amaçlarına göre adlandırın. Bu bir BEM kuralı değil, bizim görüşümüz: --featured ya da --error bir yeniden tasarımdan sağ çıkar, --yellow ise marka rengi değiştiği gün yalana dönüşür.
5. JavaScript kancalarını stil sınıflarınızdan uzak tutun. Bu da bizim görüşümüz: betiklerde öğeleri .card__button yerine data-action="close" gibi bir data niteliğiyle seçin; böylece bir sınıfı görünüm nedeniyle yeniden adlandırmak davranışı bozamaz.

Bir bloğu sonradan yeniden adlandırmak çoğunlukla bul ve değiştir işidir. Bir şablonu Bul ve değiştir aracımıza yapıştırın, regex modunu açın ve card(__|--) ifadesini product-card$1 ile değiştirin: her öğe ve değiştirici sınıfı yeni blok adına geçer, eşleşme sayısı da kaç tanesinin değiştiğini söyler. Alakasız sözcükleri yakalamamak için yalın card sınıfını ayrıca yeniden adlandırın.

BEM'i Sass ile ve yerel CSS iç içe yazımıyla yazmak

Sass'ın üst öğe seçicisi, dıştaki seçiciye bir son ek ekleyebilir ve Sass belgeleri bunun örneği olarak BEM'i kullanır. Yerel CSS iç içe yazımı (nesting) bunu yapamaz ve MDN bunu açıkça belirtir: iç içe yazılmış bir &__title bir tür seçicisi olarak okunur, bu yüzden .card__title üretmez.

// Sass: works
.card {
  &__title { font-size: 1.25rem; }    // compiles to .card__title
  &--featured { border-color: gold; } // compiles to .card--featured
}

/* Native CSS nesting: write the full class names */
.card {
  border: 1px solid #ddd;
  &.card--featured { border-color: gold; } /* .card.card--featured */
}
.card__title { font-size: 1.25rem; }

BEM'in ötesi: ona ne zaman ihtiyacınız yoktur

BEM, global bir stil sayfasında sınıf adlarının çakışmasını önlemek ve yapıyı görünür kılmak için vardır. Çakışma sorununu başka bir şey çözüyorsa, uzun adların size kazandırdığı şey azalır:

• CSS Modules sınıf adlarını varsayılan olarak yerel kapsamda tutar; bu yüzden bir bileşendeki yalın .title, bir başkasındaki .title ile çakışamaz.
• Utility-first CSS (örneğin Tailwind), özel sınıf adlarının çoğunun yerine font-bold gibi önceden tanımlanmış yardımcı sınıflar koyar; böylece adlandırma işi bileşenlerinize taşınır.
• Birkaç bileşenden oluşan küçük siteler çoğu zaman düz kebab-case ve her bileşen için bir ön ekle gayet iyi idare eder.

Bu durumlarda bile, yazdığınız her sınıf adı için güvenli varsayılan yine kebab-case'tir.

Pratik kurallar

• Sınıf adları ve özel özellikler için her zaman küçük harfli kebab-case.
• Birçok kişi tek bir global stil sayfasını paylaşıyorsa BEM: block__element--modifier, düz öğe adları, temel sınıfın yanında değiştiriciler.
• camelCase sınıf adları yalnızca CSS Modules gibi bir araç onları JavaScript'e açtığında.

Bir bileşen adını sınıfa mı çeviriyorsunuz? Büyük/küçük harf dönüştürücümüze “Product Card” yazın, kebab-case düğmesi size product-card verir. Ortam değişkenlerinden URL'lere kadar bir projenin diğer tüm katmanlarındaki kurallar için geliştirici adlandırma stilleri kopya kâğıdımıza bakın.