Modern CSS Rehberi: Subgrid, Nesting ve Container Queries ile Modern Web Mimarisi

Modern Web Trendleri: Yeni Nesil CSS

Modern web geliştirme süreçlerinde harici araç bağımlılığı azalıyor. CSS; Sass veya karmaşık JavaScript hesaplamalarına ihtiyaç duymadan native çözümler sunuyor. Dijital ajans projelerinde performans, sürdürülebilirlik ve kod okunabilirliği için üç kritik özellik öne çıkıyor: Container Queries, Subgrid ve Yerel CSS Nesting.

1. CSS Container Queries: Bileşen Bazlı Duyarlılık

Media queries viewport genişliğine bakar. Container queries ise doğrudan ebeveyn elemanın boyutuna göre stil uygular. Bağımsız, her yere taşınabilir UI bileşenleri için esastır.

Adım 1: Kapsayıcıyı Tanımlama

Hedef kapsayıcıya container-type ve opsiyonel olarak container-name verilir:

.card-wrapper {
  container-type: inline-size;
  container-name: cardContainer;
}

Adım 2: Kapsayıcı Boyutuna Göre Stil Verme

Viewport ne olursa olsun, kapsayıcı 400px üzerine çıktığında stil tetiklenir:

@container cardContainer (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
  }
}

2. CSS Subgrid: Izgara Hizalama Problemlerine Kesin Çözüm

Geleneksel Grid sisteminde çocuk elemanların içeriği (ör. kart başlıkları, butonlar) yan yana kartlarda aynı hizada durmaz. subgrid, çocuk elemanın ebeveyn ızgara çizgilerini doğrudan miras almasını sağlar.

Uygulama Adımları

• Adım 1: Ana ebeveynde ızgara oluştur: grid-template-columns: repeat(3, 1fr);
• Adım 2: Kart elemanını dikey ızgara yap ve grid-row: span 3; ata.
• Adım 3: grid-template-rows: subgrid; satırını ekle.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

Sonuç: Farklı metin uzunluklarına sahip kartların başlıkları, gövdeleri ve butonları aynı satır çizgisinde hizalanır.

3. Yerel CSS Nesting: Derleyici Olmadan Hiyerarşik Stil

PostCSS veya Sass gerekmeden CSS içinde doğrudan iç içe yazım mümkündür. Kod boyutu düşer, derleme süresi ortadan kalkar.

Sözdizimi ve Seçici Kullanımı

.navigation {
  background-color: #111;
  padding: 1rem;

  & ul {
    list-style: none;
    display: flex;
    gap: 1rem;
  }

  & a {
    color: #fff;
    text-decoration: none;

    &:hover {
      color: #00bcd4;
    }
  }
}

Modern CSS özellikleri, dijital ajans iş akışlarında derleyici zincirlerini kısaltır, tarayıcı hızını optimize eder ve temiz bir mimari sunar.

Özet ve En İyi Pratikler

• Viewport yerine Container: Yeniden kullanılabilir UI parçalarında Media Queries yerine Container Queries tercih et.
• Hizalama sorunlarında Subgrid: Kart listelerinde değişken metin boyutlarını hizalamak için flexbox hileleri yerine subgrid kullan.
• Yerel Nesting: Sass bağımlılığını kaldır; native & seçicisini doğrudan tarayıcıda çalıştır.