Tailwind'den Uzaklaşmak ve CSS Yapılandırmayı Öğrenmek

Julia Evans, son blog yazısında yıllardır kullandığı Tailwind CSS framework'ünden neden vazgeçtiğini ve kendi CSS yapısını nasıl kurduğunu detaylandırıyor. Tailwind'in sunduğu kolaylıklardan çok, native CSS'in modern gücüne odaklanan Evans, daha sürdürülebilir bir web geliştirme süreci için dokuz adımlı bir yapı öneriyor.

Neden Tailwind'den Vazgeçtim?

Evans'ın bu geçişi yapmasındaki temel motivasyonlar şunlar:

Derleme Sistemi Bağımlılığı: Tailwind'in düzgün çalışması için gereken karmaşık derleme süreçlerinden kurtulmak.
Dosya Boyutu: Optimize edilmemiş Tailwind dosyalarının 2.8MB gibi devasa boyutlara ulaşabilmesi.
HTML Okunabilirliği: "Utility-first" yaklaşımının HTML içinde yarattığı karmaşa (div soup) ve bakım zorluğu.
Temel Yetenekler: Modern CSS özelliklerinin (Grid, Flexbox, Variables) artık birçok framework'e olan ihtiyacı ortadan kaldırması.

Yeni CSS Organizasyon Sistemi

Evans, Tailwind'den öğrendiği yapısal mantığı kaybetmeden, kendi vanilla CSS sistemini dokuz ana başlıkta topluyor:

Reset (Sıfırlama): Tarayıcılar arasındaki stil farklarını gidermek için Tailwind’in "Preflight" özelliğine benzer, minimal bir sıfırlama dosyası kullanıyor.
Components (Bileşenler): Her bileşen (buton, kart, menü) için ayrı ve kapsamlı (scoped) CSS dosyaları oluşturarak modülerliği sağlıyor.
Colors (Renkler): Tüm renk paletini CSS değişkenleri (--color-primary gibi) üzerinden tanımlayarak merkezi bir yönetim kuruyor.
Font Sizes (Yazı Boyutları): Tailwind'in text-sm, text-lg gibi tanıdık isimlendirme kurallarını takip eden standart bir yazı ölçeği oluşturuyor.
Utilities (Yardımcı Sınıflar): Sadece gerçekten ihtiyaç duyulan, az sayıda ve basit yardımcı sınıflar (örneğin .hidden veya .text-center) tanımlıyor.
The Base (Temel): body, h1, p gibi temel HTML etiketleri için global ve minimal stiller belirliyor.
Spacing (Boşluklar): Elemanlar arasındaki boşlukları yönetmek için "lobotomized owl" (* + *) seçicisi gibi akıllı tekniklerden yararlanıyor.
Responsive Design (Duyarlı Tasarım): Sayısız medya sorgusu yazmak yerine, CSS Grid ve auto-fit özelliklerini kullanarak kendiliğinden duyarlı (responsive) düzenler kuruyor.
Build System (Derleme Sistemi): Üretim aşamasında dosyaları birleştirmek ve küçültmek için karmaşık araçlar yerine esbuild gibi hızlı ve basit çözümleri tercih ediyor.

Bu yaklaşım, modern CSS özelliklerinin (CSS Layers, Scope, Container Queries) yaygınlaşmasıyla birlikte, geliştiricilerin framework bağımlılığından kurtularak daha temiz ve performanslı web siteleri inşa edebileceğini kanıtlıyor.

Orijinal kaynağa buradan ulaşabilirsiniz.