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

Sıradaki ders: Specificity yönetimi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler