Frontend Architecture

CSS Mimarisi:
Hangisini Seçmeli?

01. Seçenekler Masada

CSS Modules (SASS ile)

Ne zaman? Orta/Büyük ölçekli, tasarımın çok özelleştiği projelerde.
Neden? Class name collision (çakışma) derdini çözer. Runtime maliyeti 0'dır (Build time'da CSS dosyasına dönüşür).

CSS-in-JS (Styled Components, Emotion)

Ne zaman? Çok dinamik temalandırma (theming) gerektiren React projelerinde.
Neden? JS değişkenlerini CSS içinde kullanmak çok kolaydır. Ancak Runtime Overhead yaratır (JS çalışıp CSS üretir), bu da performansı etkileyebilir.

Utility-First (Tailwind CSS)

Ne zaman? Hızın önemli olduğu, modern web projelerinin %90'ında.
Neden? İsimlendirme derdi yok. CSS dosya boyutu büyümez (sabit kalır). Design System kurmak çok kolaydır.

02. Tercih Kriterleri

"Hangisi en iyisi?" sorusu yanlıştır. "Projenin kısıtları ne?" sorusu doğrudur.

Eğer Next.js App Router kullanıyorsanız, CSS-in-JS (Styled Components) şu an Server Components ile zorlanıyor. CSS Modules veya Tailwind daha güvenli liman.
Eğer projeniz çok büyükse ve binlerce component varsa, Tailwind bakım maliyetini en aza indirir çünkü kod tabanınızda "kullanılmayan CSS" (Dead Code) birikmez.