Modern Web Tasarımında Yeni Standartlar

Modern web standartları hızla değişiyor. Dijital ajans iş akışlarında gereksiz JavaScript ve CSS ön işlemcilerine (Sass/Less) ihtiyaç kalmadı. Tarayıcı desteği tam olan üç çekirdek özellik: Container Queries, Subgrid ve CSS Nesting.

1. Adım: Container Queries ile Bileşen Bazlı Duyarlılık

Viewport yerine ebeveyn kapsayıcı genişliğine göre stil tanımlama. Medya sorgularına gerek kalmaz.

Kapsayıcı Tanımlama

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

Kapsayıcı Sorgusu Yazma

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

Fayda: Bileşen her yere taşınabilir, layout bozulmaz.

2. Adım: CSS Subgrid ile İç İçe Izgara Hizalama

İç ızgaraları (nested grids) ana ebeveyn ızgaranın sütun ve satır raylarına doğrudan kilitler.

Ana Izgara Kurulumu

.grid-parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

Subgrid Aktivasyonu

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

Fayda: Kart başlıkları, gövde metinleri ve butonlar farklı yükseklikteki içeriklere rağmen aynı yatay hizada kalır.

3. Adım: Native CSS Nesting ile Sade Stil Dosyaları

Ön işlemci (Sass, PostCSS) olmadan doğal iç içe yazım sözdizimi.

Doğrudan Yazım

.main-nav {
  background: #111;
  padding: 1rem;

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

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

    &:hover {
      text-decoration: underline;
    }
  }
}

Fayda: Derleme adımı yok, saf CSS, sıfır bağımlılık.

Modern CSS Geçişinde En İyi Pratikler

YAGNI: CSS ön işlemcilerini kaldırın, native nest kullanın.
Performans: ResizeObserver tabanlı JS çözümleri yerine Container Queries kullanın.
Bakım: Subgrid ile piksel bazlı JavaScript layout hesaplamalarından kaçının.

Özet kural: Önce native platform özellikleri. Harici kütüphaneler sadece native yetersiz kaldığında.