8. Ders: CSS Optimizasyonu, Temizliği ve Kapanış

Temellerden başladık; seçicileri, hiyerarşiyi, Flexbox ve Grid gibi modern düzenleri öğrendik. Üzerine bir de cam efekti, animasyonlar ve mobil uyumluluk ekledik. Artık elimizde harika bir kod birikimi var.

8. ve Son Dersimizde, yazdığımız tüm bu kodları projelendirirken Blogger şablonumuzu yormamak, site hızını (PageSpeed) düşürmek yerine maksimum performansta tutmak için CSS Optimizasyonu ve Kod Temizleme tekniklerini öğreneceğiz. Dersin sonunda ise tüm seriyi harika bir kapanışla taçlandıracağız.

📚 8. Ders: CSS Optimizasyonu, Temizliği ve Kapanış

Blogger gibi hazır altyapılarda site hızını belirleyen en büyük etkenlerden biri CSS ve JavaScript dosyalarının boyutudur. Kodlarımızı yazarken ne kadar "saf (pure)" ve "optimize" tutarsak, arama motorlarında (SEO) ve kullanıcı deneyiminde o kadar öne geçeriz.

1. CSS Değişkenleri (CSS Variables) Kullanımı

Sitenizde aynı renk tonlarını veya boşluk değerlerini tekrar tekrar yazmak yerine, bunları tek bir merkezde tanımlayıp dinamik olarak çağırabilirsiniz. Bu hem kod kalabalığını önler hem de ileride tek bir değişiklikle tüm sitenin renk paletini değiştirebilmenizi sağlar.

Değişken Tanımlama ve Kullanımı:

/* Değişkenleri tüm şablonun erişebileceği en üst kapsayıcıya (:root) tanımlıyoruz */
:root {
--main-color: #ff6600; /* Ana marka rengimiz */
--bg-dark: #1a1a1a; /* Koyu arka plan rengimiz */
--border-radius-main: 12px; /* Ortak oval köşe değerimiz */
}

/* Kullanırken: */
.custom-nav {
background-color: var(--bg-dark);
}
.bento-box {
border-radius: var(--border-radius-main);
}

2. Tekrarlanan Kodları Birleştirme (DRY Prensibi)

Yazılım dünyasında DRY (Don't Repeat Yourself - Kendini Tekrar Etme) adı verilen altın bir kural vardır. Eğer birden fazla sınıfta aynı CSS kurallarını yazıyorsanız, bunları virgül ile ayırarak tek bir çatı altında toplamalısınız.

Hatalı (Şişirilmiş) Kod:

.box-big {
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.box-wide {
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

Doğru (Optimize) Kod:

/* Ortak özellikleri tek seferde tanımlayın */
.box-big, .box-wide {
border-radius: var(--border-radius-main);
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

3. Kodları Sıkıştırma (Minification)

Tüm kodlarınızı yazıp bitirdikten sonra, tarayıcının okumasına gerek olmayan boşlukları, satır atlamalarını ve yorum satırlarını temizleyerek dosya boyutunu %30'a varan oranda küçültebilirsiniz.

Örneğin, dersler boyunca yazdığımız temiz kodları Blogger şablonunuza (özellikle <b:skin> veya <style> içine) eklemeden önce online bir CSS Minifier aracıyla şu hale getirebilirsiniz:

:root{--main-color:#ff6600;--bg-dark:#1a1a1a;--border-radius-main:12px;}.custom-nav{background-color:var(--bg-dark);}

Bu işlem kodun okunurluğunu azaltsa da tarayıcının kodu milisaniyeler bazında daha hızlı yüklemesini sağlar.

TEBRİKLER! SERİYİ TAMAMLADINIZ

Blogger için hazırladığımız 8 derslik Sıfırdan İleri Seviyeye Saf CSS Eğitimi burada sona erdi. Bu müfredatla birlikte bir Blogger kullanıcısı:

Şablon yapısına zarar vermeden CSS enjekte etmeyi,
Çakışmaları !important kullanmadan hiyerarşiyle çözmeyi,
Flexbox ve Bento Grid ile modern sayfa düzenleri kurmayı,
Glassmorphism ve @keyframes animasyonlarıyla premium bileşenler üretmeyi,
Ve tüm bunları Media Queries ile %100 mobil uyumlu ve optimize hale getirmeyi öğrendi.

Bu ders serisi, Blogger tabanlı içerik üreten ve tasarımını bir üst seviyeye taşımak isteyen herkes için harika bir rehber oldu. Yararlanmanız dileğiyle! css,optimizasyon,ders