CSS örgütme
Büyük CSS dosyalarını örgütleme yöntemlerini öğrenirsin.
Büyük stilleri örgütleme
Proje büyüdükçe tek bir style.css dosyası okunmaz hale gelir. Çözüm, stilleri anlamlı bölümlere ayırmak ve bunları ayrı dosyalarda tutmaktır. Genel ayrım: temel stiller (sıfırlama, tipografi), düzen stilleri (grid, flex), bileşen stilleri (kart, menü), yardımcı sınıflar (kenar boşluğu, gizleme).
Her dosya tek bir kaygıya odaklanır. Böylece bir bileşeni değiştirirken yanlışlıkla düzeni bozmazsın. Dosyaları birleştirmek için @import ya da bir derleme aracı kullanırsın.
Dosya yapısı ve partials
Sık kullanılan bir yaklaşım, küçük kısmi dosyalar (partial) tutmaktır. Adlar bir alt çizgiyle başlar: _base.css, _layout.css, _buttons.css. Alt çizgi, dosyanın tek başına yüklenmeyeceğini, bir ana dosyada birleştirileceğini gösterir.
Ana dosya — çoğunlukla main.css ya da style.css — yalnızca @import deyimlerini içerir. Düzeni oradan okursun: önce temel, sonra düzen, sonra bileşenler, en son yardımcılar. Yeni bir bölüm eklemek tek satır değişikliğine indirgenir.
Bölüm yorumları
Dosya içinde de sırayı yorumlarla işaretlersin. Bir bölümün başına kalın bir yorum satırı koymak, dosyayı tararken gözünü hedefe götürür. Yorum, bölümün adını ve içeriğini kısaca söyler; örnek: /* Forms: input, select, checkbox */.
Yorumları tutarlı tut: aynı biçim, aynı yer, aynı ayrıntı düzeyi. Böylece ekibe yeni katılan biri dosyayı açtığında harita elde eder. Bölüm sonu için ayrı bir yorum koymak da yaygındır; nerede bittiğini belli eder.
Uygulama Base bölümünü yaz
Üstte /* Base: reset, type */ bölüm yorumunu ekle. Sonra body seçicisi için margin: 0 ve line-height: 1.5 bildirimlerini yaz. En sona img seçicisi için max-width: 100% bildirimini ekle.
Örnek çözümü göster
/* stilleri buraya ekle */
/* Base: reset, type */
body {
margin: 0;
line-height: 1.5;
}
img {
max-width: 100%;
}Kendini test et
-
Form girişlerinin stilleri hangi dosyaya konur?
- _forms.css
- _base.css
- _layout.css
- _utilities.css
Cevabı göster
_forms.css — Doğru. Form girişleri bir bileşendir; _forms.css gibi adlandırılır ve components bölümünde toplanır.
-
@import deyimini tamamla
@import url("_buttons.css"); @import url("____"); @import url("_utilities.css");Cevabı göster
@import url("_buttons.css"); @import url("_forms.css"); @import url("_utilities.css"); -
Partial dosyasını amacına eşle
- _base.css
- Sıfırlama ve tipografi
- _layout.css
- Sayfa düzeni
- _buttons.css
- Düğme bileşeni
- _utilities.css
- Yardımcı sınıflar