Modern Web ve CSS Trendleri

Modern web projelerinde harici araç (Sass/PostCSS) bağımlılıkları azalıyor. Dijital ajans iş akışlarında native CSS özellikleri standartlaştı. Bu rehber; CSS Nesting, Container Queries ve Subgrid kullanımını adım adım açıklar.

1. Adım: Native CSS Nesting Uygulama

Ön işlemci (preprocessor) olmadan iç içe CSS kuralları tanımlama.

/* Native CSS Nesting */
.card {
  background: #fff;
  padding: 1rem;

  & .card-title {
    font-size: 1.5rem;
    color: #333;
  }

  &:hover {
    border-color: #0070f3;
  }
}

Pratik İpucu: Sass derleyicisi gereksiz. Tarayıcı motorları doğrudan parse eder.

2. Adım: Container Queries ile Bileşen Boyutuna Göre Stil Verme

Viewport yerine ana kapsayıcı genişliğine göre kurallar tanımlama.

/* 1. Kapsayıcıyı tanımla */
.sidebar-widget {
  container-type: inline-size;
  container-name: widget;
}

/* 2. Kapsayıcı boyutuna göre sorgula */
@container widget (max-width: 400px) {
  .widget-content {
    display: block;
    font-size: 0.9rem;
  }
}

Kullanım Alanı: Dijital ajans bileşen kütüphaneleri. Aynı bileşen kenar çubuğunda dar, ana alanda geniş yerleşim alır.

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

İç içe grid elemanlarını ana grid çizgileriyle hizalama.

/* Ana Grid */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Alt Eleman - Subgrid */
.card {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
}

Fayda: Farklı yükseklikteki kart başlıkları ve butonları aynı satırda otomatik hizalanır. JS hesaplaması gerekmez.

4. Adım: Modern CSS İş Akışına Geçiş

Build araçlarını sadeleştir: Gereksiz Sass eklentilerini kaldır.
Bileşenleri izole et: Viewport bazlı @media yerine @container kullan.
Hizalamayı CSS motoruna bırak: JS yükseklik eşitleme scriptlerini sil, subgrid kullan.

Native CSS platform özellikleri hız ve düşük bakım maliyeti sağlar.