Sınıflarla Düşünmek

Bu dersin sonunda sayfayı yeniden kullanılabilir parçalara bölebilecek ve sınıflarınıza sonradan da anlayacağınız adlar verebileceksiniz.

Sayfaları parçalar olarak görün

Bir siteye baktığınızda aynı parçaların tekrar ettiğini görürsünüz: kartlar, düğmeler, etiketler, uyarılar. CSS yazarken her sayfayı ayrı ayrı düşünmek yerine bu parçaları tanımlarsınız. Her parçaya bileşen denir.

Bir kez .dugme yazdıktan sonra sitenin her yerinde class="dugme" yazmanız yeterlidir.

Bileşen yazmak

Bileşen, o görünümü taşıyan tek bir sınıftır. İçindeki parçaları da kendi sınıflarıyla adlandırabilirsiniz.

<article class="kart">
  <h2 class="kart-baslik">Satranç Kulübü</h2>
  <p class="kart-metin">Her salı okul kütüphanesinde.</p>
</article>

<article class="kart">
  <h2 class="kart-baslik">Müzik Kulübü</h2>
  <p class="kart-metin">Her perşembe müzik odasında.</p>
</article>

.kart {
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid lightgray;
  border-radius: 8px;
}

.kart-baslik {
  margin: 0 0 4px;
  font-size: 1.25rem;
}

.kart-metin {
  margin: 0;
  color: dimgray;
}

Üçüncü bir kart eklemek için yalnızca HTML yazmanız yeterlidir.

Birden çok sınıf: Temel ve çeşit

Benzer ama küçük farkları olan parçalar için kopyala-yapıştır yapmayın. Ortak kısmı bir sınıfa, farkı ikinci bir sınıfa yazın.

<button class="dugme">Normal</button>
<button class="dugme dugme-ana">Ana</button>
<button class="dugme dugme-tehlike">Sil</button>

.dugme {
  padding: 8px 16px;
  border: 1px solid gray;
  border-radius: 6px;
  background-color: white;
  font: inherit;
}

.dugme-ana {
  border-color: teal;
  background-color: teal;
  color: white;
}

.dugme-tehlike {
  border-color: crimson;
  background-color: crimson;
  color: white;
}

.dugme her düğmenin ortak yapısını taşır. .dugme-ana yalnızca farklı olan değerleri değiştirir. İkisinin özgüllüğü aynıdır, bu yüzden çeşit kuralları temelden sonra yazılmalıdır.

font: inherit düğmelerin sayfanın yazı tipini almasını sağlar. Düğmeler ve form elemanları varsayılan olarak bunu yapmaz.

Yardımcı sınıflar

Bazı sınıflar tek bir iş yapar ve her yerde kullanılabilir. Örneğin .metin-orta yazıyı ortalar. Sık kullandığınız küçük ayarlar için kullanışlıdır, ama HTML’iniz sınıf yığınına dönüşüyorsa bir bileşen yazmanın zamanı gelmiştir.

<p class="metin-orta">Ortalanmış paragraf</p>
<p class="soluk">Soluk paragraf</p>
<p class="metin-orta soluk">İkisi birden</p>

.metin-orta {
  text-align: center;
}

.soluk {
  color: gray;
}

İyi ad vermek

Adlar, elemanın ne olduğunu anlatmalıdır, nasıl göründüğünü değil. .kirmizi-yazi sınıfının rengi yarın maviye dönerse ad yalan söylemeye başlar. .uyari adı ise her durumda doğru kalır.

Sıkça kullanılan bir adlandırma düzeni şöyledir:

• Blok: Bağımsız bileşen. .kart
• Öğe: Bileşenin parçası. .kart__baslik
• Değişken: Bileşenin çeşidi. .kart--vurgulu

Bu düzene BEM denir. Biz derslerde daha basit olan tireli yazımı kullanıyoruz. Önemli olan bir düzen seçmek ve tutarlı olmaktır.

Etiket mi, sınıf mı, id mi?

• Etiket seçicileri sitenin geneli içindir: body, h1, a gibi temel görünümler.
• Sınıflar neredeyse her şey içindir.
• id seçicilerini stil için kullanmamaya çalışın. Çok güçlüdürler ve yeniden kullanılamazlar. id niteliğini sayfa içi bağlantılar ve formlardaki label etiketleri için saklayın.

Tekrarı fark etmek

Aynı üç bildirimi iki kez yazdığınızı fark ettiğinizde durun. Bunu çözmenin yolları şunlardır:

1. Seçicileri virgülle birleştirmek
2. Ortak görünüm için bir sınıf açmak
3. Değişkenler kullanmak (ileride göreceğiz)

Ama her benzerliği birleştirmek zorunda da değilsiniz. Bir arada değişmeyecek iki şey tesadüfen benziyorsa ayrı kalsınlar.

<style>
  .etiket {
    padding: 2px 8px;
    border-radius: 999px;
    background-color: khaki;
  }
</style>

<span class="etiket">Yeni</span>

<style>
  .uyari {
    padding: 12px;
    background-color: khaki;
  }

  .uyari-tehlike {
    background-color: lightpink;
  }
</style>

<p class="uyari uyari-tehlike">Kaydedilmedi</p>

Bu derste öğrendikleriniz

• Tekrar eden parçalar bileşen olarak tek bir sınıfla yazılır.
• Temel sınıf ortak görünümü taşır, çeşit sınıfı yalnızca farkı yazar ve sonra gelir.
• Sınıf adları görünümü değil, elemanın ne olduğunu anlatır.
• Stil için çoğunlukla sınıf kullanılır, id seçicilerinden kaçınılır.