2. Ders: Blogger’ın Kemik Sınıfları ve CSS Çakışmalarını Çözme

Harika! Temelleri ve kodun nereye yazılacağını netleştirdiğimize göre, şimdi işin mutfağına girme zamanı.

2. Dersimizde, Blogger temalarının iskeletini oluşturan ana kemik sınıfları (selectors) tanıyacağız, CSS hiyerarşisini (Specificity) öğreneceğiz ve kodlarımız çalışmadığında !important tuzağına düşmeden çakışmaları nasıl çözeceğimizi göreceğiz.

Blogger şablonları, standart web sitelerinden farklı olarak kendine has dinamik etiketler ve sınıflar (class) barındırır. CSS ile bir temanın altını üstüne getirebilmek için, hangi sınıfın sitenin neresine hükmettiğini çok iyi bilmemiz gerekir.

1. Blogger'ın Kemik Sınıfları (Selectors) Nedir?

Bir Blogger temasını incelediğinizde, en yaygın olarak karşılaşacağınız ve özelleştirmek isteyeceğiniz yapılar şunlardır:

.outer-wrapper veya .content-wrapper: Sitenizin tüm içeriğini sarmalayan en dıştaki ana kutudur. Sitenin maksimum genişliğini (örneğin max-width: 1200px;) buradan ayarlarız.
.main-wrapper veya .main: Sadece blog yazılarının listelendiği ana içerik alanıdır.
.post-outer / .post: Ana sayfadaki veya yazı içi sayfadaki her bir blog yazısı kutusunu temsil eder. Grid veya liste tasarımları bu sınıfa uygulanır.
.post-body: Blog yazınızın ana metin (içerik) alanıdır. Yazı içi font boyutları, paragraflar arası boşluklar ve resimlerin hizalanması tamamen bu sınıfı bağlar.
.sidebar-wrapper / .sidebar: Sitenizin sağ veya sol panelini temsil eder. Bileşenlerin (Widget) toplandığı yerdir.
.widget: Blogger'ın "Yerleşim" (Layout) kısmından eklediğiniz her bir bileşenin (Popüler Yayınlar, Kategoriler, Profil vb.) ortak sınıfıdır.

2. CSS Hiyerarşisi (Specificity) ve Blogger'daki Çakışmalar

Blogger'da yeni bir CSS kodu yazdığınızda bazen kodun çalışmadığını fark edersiniz. Bunun sebebi hata yapmanız değil, temanın kendi içindeki başka bir CSS kuralının sizin kodunuzdan daha baskın (özgül) olmasıdır.

Tarayıcılar hangi kodun uygulanacağına şu hiyerarşiye göre karar verir:

Satır içi (Inline) CSS: Doğrudan HTML etiketine yazılır (style="..."). En baskındır.
ID Seçiciler: #header, #HTML1 gibi tekil seçiciler. Çok güçlüdür.
Class (Sınıf) Seçiciler: .post-body, .widget gibi seçiciler. Orta güçtedir.
Element Seçiciler: p, h2, div gibi doğrudan etiketler. En zayıfıdır.

❌ `!important` Tuzağından Kaçının

Çoğu tasarımcı kodu çalıştıramadığında hemen sonuna !important ekler (Örn: color: red !important;). Bu kısa vadede sorunu çözse de, ileride o kodu başka bir yerde esnetmek istediğinizde CSS yapınızı kilitler ve tam bir kod çöplüğüne yol açar. Amacımız saf ve temiz kod yazmak.

Kod Çakışması Nasıl Çözülür? (Spesifikliği Artırmak)

Eğer yazdığınız bir .post-title kuralı çalışmıyorsa, seçiciyi daha spesifik hale getirmelisiniz. Yani elementin yolunu tarif etmelisiniz.

Çalışmayan Zayıf Kod:

.post-title {
color: #ff0000;
}

Çakışmayı Çözen Güçlü Kod (Yolu netleştirin):

/* Ana içerik alanının içindeki yazı kutusunun içindeki başlık sınıfı */
.main-wrapper .post .post-title {
color: #ff0000;
}

Tarayıcı, ikinci kodu daha detaylı bir tarif olarak gördüğü için temanın eski kodunu yok sayar ve sizin kuralınızı uygular.

3. Pratik Uygulama: Sadece Yazı Sayfalarındaki Başlıkları Değiştirmek

Blogger'ın harika bir özelliğini kullanarak CSS çakışmalarını mantıksal olarak da çözebiliriz. Örneğin; bir önceki derste verdiğimiz ödevde ana sayfadaki başlıkların alt çizgisini kaldırmıştık. Peki ya bu değişikliğin sadece yazıların kendi içine girildiğinde aktif olmasını, ana sayfada ise farklı görünmesini istiyorsak?

Blogger, yazı sayfalarındayken <body> etiketine otomatik olarak .item-view sınıfını ekler. Ana sayfadayken ise .index-view sınıfını ekler.

Aşağıdaki kodu şablonunuza ekleyerek bu gücü test edin:

/* Sadece ana sayfadaki (index) yazı başlıklarının altına ince bir çizgi çekelim */
.index-view .post-title {
border-bottom: 2px solid #e1e8ed;
padding-bottom: 8px;
}

/* Sadece yazı detay sayfasına (item) girildiğinde başlık daha büyük ve kırmızı olsun, alt çizgisi olmasın */
.item-view .post-title {
font-size: 32px;
color: #e74c3c;
border-bottom: none;
}

Ders Sonu Ödevi