Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer

Stil (CSS) Optimizasyonu

3 min read

Günümüzdeki sitelerin tasarımları artık CSS ile oluşturuluyor. Bantgenişliğinden Konuşalım başlıklı makalede bantgenişliğini ekonomik kullanmak ve paramızın cebimizde kalması yapmamız gereken işlemlerden birisinin de stil dosyamızı optimize etmek olduğunu belirtmiştim. Her ne kadar stil dosyaları, sitede kullanılan resimler kadar bantgenişliğine etki etmese de sitemizin her bakımdan sade kodlarla oluşturulması bizim için her zaman avantajdır.

Seçicileri Gruplandırma

CSS’in seçicilerini ve html etiketlerini biçimlendirmeyi gruplandırarak yazmak optimizasyon konusunda en önemli silahımız. Örneğin sitemizin bağlantılarını şekillendirmek istiyoruz diyelim. CSS İle Bağlantılara Şekil Vermek başlıklı yazımda bağlantılara nasıl şekil vereceğimizi detaylı olarak anlatmıştım. Sitemizin “icerik” isimli seçicisinin (id) içindeki bağlantılara şekil vermek istediğimizi düşünelim. Yeni öğrenen bir kişi olarak ilk yapacağımız şey her bağlantı türüne (aktif, önceden ziyaret edilmiş vs.) ayrı ayrı şekil vermek olur.

[css]#icerik a:link {
color: #FF6600;
text-decoration: none;
}

#icerik a:active {
color: #FF6600;
text-decoration: none;
}

#icerik a:visited {
color: #FF6600;
text-decoration: none;
}

#icerik a:hover {
color: #FF6600;
text-decoration: none;
}[/css]

Gördüğümüz gibi sadece bağlantılara şekil vermek için ne kadar kod yazdık. Bir de optimizasyon sonucu aynı kodlara bakalım. Optimize etmek amacıyla seçicileri gruplandıracağız. Bunu da gruplandırmak istediğimiz zaman seçicilerin arasına virgül koyduktan sonra hepsini birleştirerek yapabiliriz. İşte kodumuzun optimize edilmiş şekli;
[css]#icerik a:link, #icerik a:active, #icerik a:visited, #icerik a:hover{
color: #FF6600;
text-decoration: none;
}[/css]
Kodu ne kadar azaldığı ve sadeleştiğini açıkça görebiliyoruz. Belki bu haliyle “ufak bir değişiklik, sadece bir kaç fazla karakterden kurtulduk” diyebilirsiniz fakat bunu anlayışı tüm stil dosyanıza yansıttığınız zaman kurtulduğunuz şey bir kaç küçük karakter olmaktan çıkacaktır ;)

Güncelleme: eburhan
Bir linkin eğer tüm özelliklerini (link, visited, hover, active) aynı şekilde biçimlendireceksek;
#icerik a:link, #icerik a:active, #icerik a:visited, #icerik a:hover{}
demek yerine #icerik a {} diyerek kodumuzu daha da sadeleştirebiliriz.

Özellikleri Gruplandırma

Seçicileri gruplandırmaktan başka, bu seçicilerin özelliklerini de gruplandırabiliyoruz. Özellik derken şunu kastediyorum: Mesela yukarıdaki örnekte de bahsettiğim icerik seçicisinin konumlandırmasının şu şekilde olduğunu varsayalım.

[css]#icerik {
margin-left: 10px;
margin-right: 5px;
margin-top: 15px;
margin-bottom: 20px;
}[/css]

Bu haliyle icerik seçicisi soldan 10, sağdan 5, üstten 15, alttan 20 piksel boşluk kalacak şekilde sayfamıza yerleşecektir. Gördüğünüz gibi sadece konumlandırma için 4 satır harcadık. Bir de gruplandırdıktan sonraki şekline bakalım.
[css] #icerik {
margin: 15px 5px 20px 10px;
}[/css]

Optimizasyon yani burası için gruplandırma sonrasında 4 satırı tek satıra indirgemiş olduk ;) Tabi şunu da vurgulamakta fayda var. Özellik gruplandırmada sırayı bilmek lazım. Yani ilk büyüklük olan 10px’in sol mu sağ mı olduğunu bilmek lazım. Bunu da şöyle aklınızda tutabilirsiniz. Üstten başlamak üzere saat istikametinde ilerler.

margin: üst, sağ, alt, sol;

Açıklayıcı Notları Kaldırın

Stil dosyalarında kodların içinde kaybolmamak için aralara bazen şu şekilde açıklayıcı notlar koymaktayız.

[css]/* ***** içerik başlangıcı ***** */

#icerik {
margin: 15px 5px 20px 10px;
}

/* ***** içerik bitişi ***** */[/css]

Bu açıklayıcı notları dosyalar bilgisayarımızdayken yani lokalde çalışırken istediğimiz kadar kullanabiliriz fakat dosyayı bu şekilde sitemize göndermek pek mantıklı olmayacaktır. Bu yorum kısımlarını, koymuş olduğumuz küçük notları kaldırabiliriz.

Boşlukları Kaldırın

Yukarıdaki örnekleri kodlar kolay anlaşılsın diye satır satır yazdım. Kendi stil dosyalarımda da sürekli düzeltmeler yaptığım için böyle anlaşılır şekilde yazarım. Oysa ki satırlar arasındaki boşlukları kaldırarak da alandan kazanabiliriz. Yani hepsini bitişik yazabiliriz. Bunu da farklı bir örnek üzerinde gösterelim.

[css].yanmenu {background-color: #90a090;color: #fff;font-size: 11px;text-align: center;}[/css]

Her ne kadar boşlukları kaldırarak bir miktar daha dosyanın boyutundan kazansak da olumsuz etkileri yok değil. Çümkü böyle bir durumda dosyada değişiklik yapmak istediğimiz zaman gerçekten zorlanırız, tek satırda kodu bulmak için çabalar dururuz. Bu sorunun önüne geçmek için de şöyle bir yol izleyin.

* Bilgisayarınızda stil dosyasını hazırlarken kodlarınızı satır satır, açıklayıcı notlarla, rahat bir anlayışla yazın.
* Dosyanızı internete gönderme zamanı geldiğinde iki seçenek karşınıza çıkıyor. Dosyanızın öncelikle bir yedeğini alın. Ardından ya kendiniz stil dosyanızı yukarıda anlattığım mantıkla optimize edin ve sitenize gönderin. Ya da optimizasyon işleminizi CSS Optimiser gibi bir site vasıtasıyla yapın. Bu sitelerin kullanımı oldukça basittir. Dosyanızı siteye gönderir ve neleri optimize etmesini istediğinizi belirtirsiniz. İşlem sonrasında size indirilebilir halde dosyanızın optimize edilmiş şekilini sunar ;)

WordPress içerik yönetim sistemi için de bu konuda çok güzel bir eklenti var. CSS Compress eklentisi. Bu eklenti sayesinde siteniz görüntülenirken stil dosyanız, tüm boşlukları alınmış şekilde görüntülenir fakat orjinali korunur ;) Eklentiyi buradan veya buradan indirebilirsiniz.

Sonuç

Bu seferki optimizasyon konumuz sitl dosyalarımız üzerineydi ve biraz daha optimizasyonla bantgenişliğinden kazandık ve paramızın bir miktarını daha kurtardık :) Bundan sonraki optimizasyon makalelerimde de bantgenişliği yüzünden hosting firmamıza fazladan para vermek zorunda kalmadan yolumuza devam edeceğiz ;) Görüşmek üzere…

Güncelleme
Burada bahsetmediğim bir takım farklı gruplandırmalar da vardır (background, font vb.) Bunlar dahil diğer tüm CSS kodlarını kolaylıkla düzenleyebilmek için Top Style programından faydalanabilirsiniz.

Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer