CSS Nesting Artık Resmi: SCSS'e Gerek Kalmıyor mu?

Merhaba,

SCSS veya Less kullanan ön yüz geliştiricilerinin yıllardır native CSS'de eksikliğini hissettiği özellik nihayet geldi: CSS Nesting. 2024 itibarıyla tüm modern tarayıcılarda destekleniyor. Bu yazımda nesting'i ve SCSS ile karşılaştırmayı dilim döndüğünce aktaracağım.

CSS Nesting Nedir ?

Nesting, CSS kurallarını iç içe yazabilmeyi sağlıyor. SCSS kullananlar zaten bu yapıya aşina:

/* SCSS'de böyle yazıyorduk */
.kart {
  background: white;
  padding: 1rem;

  .kart-baslik {
    font-size: 1.2rem;
    color: #111;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
  }
}

Artık bu native CSS'de de çalışıyor:

/* Native CSS Nesting */
.kart {
  background: white;
  padding: 1rem;

  .kart-baslik {
    font-size: 1.2rem;
    color: #111;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
  }
}

Sözdizimi neredeyse birebir aynı. Fark yok gibi görünüyor, değil mi? Ama birkaç önemli detay var.

Native CSS Nesting'in SCSS'den Farkı

Tam aynı değil. Bilmeniz gereken farklar:

• Element seçicileri doğrudan nest edilemiyor: .ebeveyn { p { ... } } SCSS'de çalışır ama native CSS'de element seçicileri için & veya :is() gerekiyor: .ebeveyn { & p { ... } }
• Cascade farkı: Native CSS nesting, spesifiklik hesaplamasında SCSS'den biraz farklı davranabiliyor. Karmaşık seçicilerde dikkatli olmak lazım.
• Derleme gerekmez: Bu en büyük artısı — tarayıcı doğrudan anlıyor, build adımına gerek yok.

SCSS'e Artık Gerek Yok mu ?

Bu sorunun cevabı "kısmen hayır". SCSS hâlâ şunları sunuyor:

• Variables (CSS custom properties ile çözülüyor büyük ölçüde)
• Mixins ve functions (native CSS'de yok)
• @extend (native CSS'de yok)
• Daha gelişmiş döngü ve mantıksal yapılar

Küçük ve orta projeler için native CSS nesting + CSS custom properties kombinasyonu SCSS ihtiyacını büyük ölçüde ortadan kaldırıyor. Büyük ve karmaşık projeler için SCSS hâlâ değer sunuyor ama bu değer giderek azalıyor.

Tarayıcı Desteği

2024 başı itibarıyla Chrome 112+, Firefox 117+, Safari 17+ ve Edge 112+'da destekleniyor. Küresel kullanım oranı %90'ın üzerinde. Yeni projelerde güvenle kullanabilirsiniz.

İyi Günler Dilerim,