CSS Nesting Artık Native! Sass’siz Nested Kodlama Rehberi

Sass’siz Mutluluk: Native CSS Nesting ile Temiz Seçiciler

Yıllarca Sass, Less ve Stylus gibi ön işlemcilerle CSS’i daha okunabilir hale getirdik. Ama artık o derleme sürecine, node paketlerine ve karmaşık config dosyalarına mahkûm değiliz. 🥳

Tarayıcılar sonunda “tamam, tamam anladım” diyor ve nested selector desteğini artık doğrudan sağlıyor.
Yepyeni CSS çağımıza hoş geldin!

Artık Bu Kod (Büyük Ölçüde) Gerçekten Geçerli!

.card {
  color: black;
  & h2 {
    font-size: 2rem;
  }
  & a:hover {
    text-decoration: underline;
  }
}

Eskiden bu yazım şekli sadece Sass’ın işiydi, şimdi ise modern tarayıcılarda doğrudan çalışıyor. Yani .css dosyasında yazsan bile tarayıcı bu yapıyı anlıyor — herhangi bir derleme gerekmiyor.

”Büyük ölçüde” diyorum çünkü, hala bazı tarayıcı sürümlerinde bu özellik çalışmıyor. Sorunsuz çalıştırabileceğin sürümler arasında Chrome 120+, Edge 120+, Firefox 117+ ve Safari 17+ yer alıyor.

Tarayıcılar, yukarıdaki kodu kendi içinde şu hâle çeviriyor:

.card {
  color: black;
}
.card h2 {
  font-size: 2rem;
}
.card a:hover {
  text-decoration: underline;
}

Daha temiz, daha düzenli ve daha hızlı, Sass’siz bir hayat.

Nasıl Çalışır?

Nesting, CSS kuralları içinde başka seçiciler tanımlamana izin verir.
& sembolü, ebeveyn seçiciyi (parent selector) temsil eder.
Bu sayede bir bileşenin içindeki tüm alt elemanları tek bir blokta gruplayabilir, stil hiyerarşisini görsel olarak da koruyabilirsin.

Örneğin:

.button {
  background: blue;
  & span {
    color: white;
  }
  &:hover {
    background: darkblue;
  }
}

Bu da otomatik olarak button span ve button:hover kurallarına dönüşür.
Kodun hem daha kısa hem de bağlamı (context) çok daha net olur.

Avantajları

• Bağımlılıksız: Sass, Less gibi ön işlemcilere gerek kalmaz.
• Daha okunabilir: Bileşenin tüm alt elemanları tek yerde toplanır.
• Bakımı kolay: Hangi stilin nereye ait olduğu her zaman net olur.
• Performanslı: Tarayıcı tarafından doğrudan yorumlanır.
• Component tabanlı yapıya uygun: React, Vue, Svelte gibi frameworklerle doğal uyum sağlar.

Medya Sorguları ve Durumlar (States)

CSS Nesting sadece alt elemanları değil, medya sorgularını ve durumları da kapsayabilir.
Örneğin:

.card {
  padding: 1rem;
  background: white;

  @media (max-width: 600px) {
    & {
      background: lightgray;
      padding: 0.5rem;
    }
  }
}

Bu sayede .card bileşeni hem masaüstü hem mobil görünümünü tek blokta yönetebilir. 👌

Ayrıca pseudo element ve durumlarda da destek tamdır:

.button {
  &::before {
    content: '👉';
  }
  &:active {
    transform: scale(0.98);
  }
}

⚠️ Dikkat Edilmesi Gerekenler

• Native CSS Nesting hâlâ görece yeni bir özellik.
• Chrome 120+, Edge 120+, Safari 17+ ve Firefox 117+ sürümlerinde sorunsuz çalışır.
• Daha eski tarayıcılar için (özellikle eski Safari veya Android WebView sürümleri), PostCSS’in postcss-nesting veya postcss-preset-env eklentileriyle polyfill kullanmak gerekebilir.
• Ayrıca aşırı nesting (örneğin 5-6 seviye iç içe yapı) okunabilirliği azaltabilir ve specificity sorunları yaratabilir.

Gerçek Hayat Senaryosu

Bir tasarım sisteminde .card, .modal veya .button gibi bileşenlerin kendi stillerini kapsüllemek istiyorsun diyelim.
Her biri için ayrı CSS dosyası oluşturmak yerine nested yapı sayesinde hepsini tek yerde yönetebilirsin:

.modal {
  display: flex;
  justify-content: center;

  & .content {
    background: white;
    padding: 2rem;

    & h2 {
      font-size: 1.5rem;
    }
  }

  &.active {
    opacity: 1;
  }
}

Bu yapı hem React/Vue projelerinde hem de vanilla CSS yapılarında harika çalışır.
Dosya düzeni sadeleşir, stil yönetimi hızlanır.

Sonuç

Sass’siz nested CSS dönemi resmen başladı!
Artık daha az araç, daha fazla tarayıcı gücü.

CSS sonunda JavaScript kadar modüler ve akıllı hale geldi.

Kısacası: Derleyiciye elveda, native CSS’e merhaba!