Modern CSS Rehberi: Subgrid, CSS Nesting ve Container Queries

Modern Web Tasarımında Yeni Standartlar

Modern web geliştirme süreçlerinde harici araç bağımlılığı azalıyor. Sass/PostCSS ve JavaScript tabanlı layout hesaplamaları yerini native CSS çözümlerine bırakıyor. Dijital ajans iş akışlarında performans ve sürdürülebilirlik sağlayan üç ana CSS özelliği:

• Container Queries: Viewport yerine üst eleman genişliğine göre duyarlı tasarım.
• CSS Subgrid: İç içe ızgara yapılarında üst ızgara çizgilerini miras alma.
• Native CSS Nesting: Ön işlemci olmadan iç içe kural tanımlama.

Adım 1: Container Queries ile Bileşen Bazlı Tasarım

Viewport bağımlı @media sorguları bileşen mimarisini bozar. @container kuralı bileşeni yerleştiği alanın genişliğine göre şekillendirir.

Kapsayıcı Tanımlama

Hedef kapsayıcıya bağlam türü verilir:

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

Kapsayıcı Boyutuna Göre Stil Verme

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

İpucu: Birden fazla konteyner varsa container-name çakışmaları önler. Tekil konteynerlerde sadece container-type: inline-size yeterlidir.

Adım 2: CSS Subgrid ile Hizalama Problemlerini Çözme

Standart CSS Grid iç içe elemanların üst ızgarayı görmesini engeller. grid-template-columns: subgrid veya grid-template-rows: subgrid bu limiti kaldırır.

Eşit Yükseklikte Kart İçerikleri Oluşturma

Farklı metin uzunluklarına sahip kartların başlık ve butonlarını aynı hizada tutma adımları:

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

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

Her .card-item içindeki başlık, gövde ve altbilgi, kart boyutu ne olursa olsun yatay eksende eşit hizalanır.

Adım 3: Native CSS Nesting ile Temiz Kod Mimarisi

Pre-processor gereksinimi bitti. Standart CSS artık doğrudan iç içe yazımı destekler.

Sözdizimi Kuralları

.button {
  background: #0066ff;
  color: #ffffff;
  padding: 0.75rem 1.5rem;

  &:hover {
    background: #0052cc;
  }

  &.is-disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .icon {
    margin-right: 0.5rem;
  }
}

& işareti doğrudan üst seçiciye referans verir. Yalın element seçicilerinde & kullanımı zorunlu değildir ancak okunabilirlik için önerilir.

Dijital Ajans Projelerinde Sağlanan Avantajlar

• Daha Küçük Bundle Boyutu: JS tabanlı layout observer kütüphanelerine gerek kalmaz.
• Daha Az Derleme Yükü: Sass bağımlılıkları kalkar, derleme süreleri sıfırlanır.
• Tam Modülerlik: Tasarım sistemleri ve UI bileşenleri her sayfada hatasız çalışır.