CSS
Modüler CSS
Modüler CSS yazma yöntemlerini öğrenirsin.
Modüler CSS nedir?
Modüler CSS, stilleri bileşen bazında küçük dosyalara bölme düşüncesidir. Her bileşenin kendi stili kendi dosyasındadır; başka bileşenlerin stillerine karışmaz. Bu yaklaşım, büyük ekiplerin aynı kod tabanında çakışmadan çalışmasını sağlar.
Üç yaygın yöntem vardır: BEM gibi adlandırma yöntemleri, derleme araçlarının CSS Modules özelliği ve bileşen framework'lerinin scoped stilleri. Üçü de aynı kaygıyı çözer: sınıf adlarının başka yerlerde beklenmedik şekilde çakışmasını önlemek.
CSS Modules nasıl çalışır?
Bir button.module.css dosyasında .root { ... } yazarsın. Derleme sırasında araç bu adı ._root_1a2b3 gibi benzersiz bir adla yeniden adlandırır. JavaScript tarafında styles.root ile bu adı alır, öğeye className={styles.root} biçiminde verirsin.
Avantajı: aynı .root adını başka bir dosyada da kullanabilirsin; çakışma olmaz çünkü derlenen ad farklıdır. Sınıf adlarının kısa ve anlamlı kalmasıyla birlikte büyük projelerde çakışma kaygısı sıfıra iner.
Bileşen framework'lerinde scoped stiller
Bazı bileşen framework'leri — Vue, Svelte — dosya içinde <style scoped> bloğu sunar. Buraya yazdığın stiller yalnızca o bileşenin öğelerine uygulanır; araç, bileşenin öğelerine veri özniteliği ekler ve stilleri o özniteliğe bağlar.
Avantajı, ayrı bir dosya açmadan bileşen stillerini yanında tutmaktır. Tek kaygı: scoped stiller genelde yüksek spesifiteye çıkabilir çünkü her seçici bir öznitelik seçicisiyle birleştirilir. Bu yüzden scoped stilleri kısa ve bileşen sınırları içinde tutmak gerekir.
Uygulama Global sınıfı işaretle
Bir .btn sınıfı yaz ve içine padding: 0.5rem 1rem bildirimini koy. Hemen ardından :global(.link) bildirimi yaz ve içine color: navy bildirimini koy. Sınıf adları noktayla başlamalı.
Örnek çözümü göster
/* .btn sınıfını ve :global(.link) bildirimini ekle */
.btn {
padding: 0.5rem 1rem;
}
:global(.link) {
color: navy;
}
Kendini test et
-
Hangi yöntem, sınıf adlarını dosya bazında benzersiz yapar?
- Düz CSS dosyaları
- Tek style.css dosyası
- CSS Modules
- @import deyimi
Cevabı göster
CSS Modules — Doğru. CSS Modules, her dosyanın sınıf adlarını derleme sırasında benzersiz son eklerle yeniden adlandırır.
-
CSS Modules dosyasında sınıf tanımla
/* button.module.css dosyası */
____ {
background: navy;
color: white;
}
Cevabı göster
/* button.module.css dosyası */
.root {
background: navy;
color: white;
}
-
Modüler CSS yöntemini özelliğine eşle
- BEM
- Adlandırma yöntemi
- CSS Modules
- Derleme aracı
- <style scoped>
- Bileşen framework'ü
- @import
- Dosya birleştirme
Sıradaki ders: Özet - Bileşen kütüphanesi
