ZorHTML & CSSFrontend

BEM, CSS Modules ve Tailwind CSS yaklaşımlarını karşılaştırın.

Cevap

Hepsi büyük projelerde CSS'in global olmasından kaynaklanan çakışma sorununu çözmeye çalışır.

YaklaşımNasıl çalışırArtıEksi
BEM.kart__baslik--aktif isimlendirme kuralıAraç gerektirmez, okunabilirDisiplin ister, isimler uzar
CSS ModulesSınıf adları derlemede benzersizleştirilir (Kart_baslik_x8f2)Gerçek kapsam, sade CSSDinamik stil için ek iş
TailwindYardımcı (utility) sınıflar: p-4 text-sm font-semiboldHızlı geliştirme, tutarlı tasarım token'ları, kullanılmayan CSS atılırHTML kalabalıklaşır, öğrenme eğrisi
CSS-in-JS (styled-components)Stil JavaScript'te yazılırProp'a göre dinamik stilÇalışma zamanı maliyeti, RSC ile uyumsuzluk

Bugün Next.js projelerinde Tailwind ve CSS Modules en yaygın tercihlerdir.

Mülakat Defteri editörleri ·

  1. Semantik HTML nedir, neden önemlidir?KolayHTML & CSSFrontend
  2. CSS box model nedir? box-sizing: border-box ne işe yarar?KolayHTML & CSSFrontend
  3. position değerleri nelerdir?KolayHTML & CSSFrontend
  4. Flexbox ile Grid arasındaki fark nedir? Hangisini ne zaman seçersiniz?OrtaHTML & CSSFrontend
  5. CSS specificity nasıl hesaplanır?OrtaHTML & CSSFrontend
  6. Pseudo-class ile pseudo-element arasındaki fark nedir?OrtaHTML & CSSFrontend

Bu konuda başka bir soru biliyor musun?

Mülakatta karşılaştığın soruları ekle, onaylandıktan sonra yayına alınsın.

Soru ekle