Kullanışlı CSS Yazmanın Püf Noktaları

Web sayfasını insan olarak düşünürsek CSS‘de bu insanın kıyafetidir.
Bu kıyafeti seçerken ne kadar özeniyorsak CSS ile kodlama yaparken de bu şekilde özen göstermeliyiz.

İleri ki zamanlarda site tasarımınızda yapacağınız değişiklikler de zorlanmamak ve işlerinizi düzenli bir şekilde yürütebilmeniz için aşağıda yazılanları uygulamaya koymanızı öneririm.

1 – CSS döküman şablonu oluşturma
CSS dosyanızın en üst kısmında oluşturacağınız bir şablon ile ulaşmak istediğiniz satırlara çok daha kısa sürede ulaşabilir CSS dosyanız içindeki düzeni sağlayabilirsiniz.
Örnek

/*————
[CSS Döküman Şablonu]
1. Body
2. Header #header
2.1. Navigation / #navigation
3. Content / #content
3.1. Post / #post
3.2. Sidebar / #sidebar
4. Footer / #footer
————–* gibi

2 – CSS Reset
Düzenli CSS yazmanın ilk koşulu güzel bir Reset koduyla başlamaktan geçer.
Bunun için tek tek yazmakla uğraşmanıza gerek yoktur, bu konuyla ilgili ulaşabileceğiniz sınırsız kaynak internet ortamında mevcuttur.Ben sizlere Google ‘a CSS reset yazdığımda ilk çıkan linklerden derlediğim
bir kaynak listesi sunacağım, seçim sizlerin.

Eric Meyer’s “Reset CSS” 2.0
HTML5 Doctor CSS Reset
Yahoo! (YUI 3) Reset CSS
Universal Selector ‘*’ Reset
Normalize.css 1.0

3 – Açıklama başlıkları kullanın
Geriye yönelik değişiklikler yaparken en çok zorlandığım sorunlardan biriydi aradığım div ‘e ait özelliklerin bulunduğu CSS satırını bulmak. Önceden karışık ve düzensiz çalıştığım için aradığım satırı bulurken az cebelleşmiyordum kodlar arasında şimdi ise açıklayıcı başlıklar ile bu sorunu çözmüş bulunuyorum. Sizlerde bu yolu denerseniz hem kod aramaktan gözleriniz ağrımaz hemde zamandan tasarruf etmiş olursunuz.

Örnek verecek olursak;

/***** Wrapper Div CSS Kodları *****/
#wrapper{
clear: left;
float: left;
padding-top: 20px;
}

/***** Container Div CSS Kodları *****/
#container{
float: left;
margin-right: 13px;
width: 647px;
}

/***** Post Div CSS Kodları *****/
#post{
clear: left;
float: left;
margin-top: 20px;
}

/***** Sidebar Div CSS Kodları *****/
#sidebar{
float: left;
margin: 0;
width: 300px;
padding:10px;
background:#ffffff;
font-family: verdana, sans-serif;
font-size: 12px;
}

Bu şekilde kod karmaşasının önüne geçmiş olabilirsiniz.

4 – Alfabetik kodlama sırası
Yukarıdaki örnek üzerine bir kaç ufak ekleme yaparak sizlere alfabetik sıralama hakkında kısa yoldan bilgi vermek istiyorum.

#sidebar{
float: left;
margin: 0;
width: 300px;
padding:10px;
background:#ffffff;
font-family: verdana, sans-serif;
font-size: 12px;
}

#sidebar{
background:#ffffff;
float: left;
font-family: verdana, sans-serif;
font-size: 12px;
margin: 0;
padding:10px;
width: 300px;
}

Şimdi sizlere soruyorum, yukarıdaki örnek fazla kafa karıştırmayabilir fakat uzun yazılmış CSS kodlarında aradığınız satırı bulmak hangisinde daha kolay olacaktır. Seçim sizin 😉

5 – Tek satırda kod yazma alışkanlığı ile kod satırlarını azaltmak
Bu kısım CSS dosyanızın görsel olarak daha sade ve basit görünmesinin ince ipuçlarından birini içermekte. Demek istediğime gelecek olursak bazı div ‘lerin CSS kodları çok sayıda özellik barındırabilir. Bu durumlarda tek satırda tüm kodları birleştirmek ileri de dönüp göz atarken kafa karıştırabilir fakat
3 veya 4 satır özellik içeren divler için bu kolaylığı göz ardı etmemelisiniz.

Örnek:
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 15px;

üstteki gibi alt alta özellikleri tanımlamaktansa aşağıdaki gibi tek satırda bu işi çözebiliriz.
font: bold 11px/15px verdana, sans-serif;

Yukarıda anlattıklarımla göze hoş gelen ,düzenli CSS dosyaları oluşturmak mümkün.
Bu anlattıklarım tasarımcıların dikkat etmesi gereken konuların başında gelmelidir.

Kaynaklar :

1. http://net.tutsplus.com/tutorials/html-css-techniques/5-tips-to-writing-better-css/
2. http://coding.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/
3. http://davidwalsh.name/format-css-files