Kadir GÜNAY' ın Css, Xhtml, jQuery ve Arayüz Geliştirme Güncesi

CSS Kodlarken İşinize Yarayacak İpuçları

Css kodlamasına yeni başlayanlar ya da kendini geliştirmek isteyen arkadaşlar için kendimce bazı ipuçları vermek istedim. Neler yapıyorum, nelere dikkat ediyorum, hangi kurallara göre yazıyorum v.b şeyler hakkında maddelerden oluşan ve anlatımları bulunan bir yazı olacak birazdan okuyacağınız bu yazım. Umarım işinize yarayabilir

1) Ayrı bir dosya oluşturun

Ayrı dosya oluşturmaktan kastım yazacağınız stil kodlarınız aynı html dosyası içinde olmasın. Şöyle ki;

<style type="text/css"></style>

bu kullanım aynı dosya içine head etiketi arasına stil değişkeni açarak stil değerleri atamaya yarar. Bu şekilde kullanımı tek sayfalık projeler için kullanabilirsiniz. Diğer türlü ayrı bir css dosyası oluşturup şu şekilde sayfanıza ekleyebilirsiniz;

<link rel="stylesheet" type="text/css" charset="utf-8" href="css-dosya-yolunuz" />

2) Satır içi kodlama yapmayın

Bir üstteki madde ile çok benzeyen bu yöntem şu şekilde kullanılır ve kötü bir görüntü oluşturur. Ben bu tarz kullanım yerine stil vereceğiniz elemana bir id veya sınıf atamayı tavsiye ederim.

<p style="color:#999999; margin-left:10px; font-size:16px;">kadirgunay.com</p>

Bu şekilde yapacağımıza p elemanına bir sınıf atayabilir ve genel css dosyamızda değer verip kullanabiliriz.

3) Tek satır kodlama yapmaya dikkat edin

Tek satır kodlamadan kastım şudur; stil kodlarınızı yazarken genel kullanılan yöntem her bir değer kodu yazıldıktan sonra satır atlanması ve diğer değerin alta yazılmasıdır. Örnek;

p { color:#666666;
font-size:16px;
margin-left:10px;
}

Bu hem stil dosyanızı uzatacak hem de boyutunu arttıracaktır. Bunun yerine şu şekilde yapabilirsiniz;

p { color:#666666;  font-size:16px; margin-left:10px; }

4) Sık sık yorum kullanın

Her yazılım dilinde yorum olayı vardır. Neyin ne olduğunu, ne için yapıldığını anlatan kısa uyarılardır bunlar. İşte css kodlamasında da hangi bölümü ne için kodladığınızı anlatmak için şu şekilde bir yorum kullanımı yapabilirsiniz;

/* tüm p elemanları için verilen değerler */

p { color:#666666;  font-size:16px; margin-left:10px; }

/* */ işaretleri css kodlamasının yorum değerlerdir.

5) Genel stilleri ve renk stillerini en üste yazın

Sayfanızda kullanacağınız genel bağlantı stillerini, renk stillerini ve genel elemanların ortak stillerini sayfanızın en üstüne yazın. Bu yöntem size hem zaman kazandıracaktır hem de kod kalabalığı yapmayacaktır. Bu değerleri yorum şeklinde de ekleyebilirsiniz. Örnek vermek gerekirse tüm porojede h1 elemanın renkleri sarı, boyutu 14px ve altı çizili olacaksa bunu bir kez yazmanız yeterli olacaktır. Veya birden fazla renk kullanacaksanız bu renklerin nerelerde ne olduğunu yorum alanı içine yazarsanız sürekli tasarıma dönüp bakmak zorunda kalmazsınız.

6) Kısa kod yazmaya gayret edin

Kısa kod mantığım benim şudur; eğer bir elemanın bir özelliği bir kaç değer alıyorsa ayrı ayrı yazmak yerine hepsini bir satırda yazıp çıkarabilirim. Örnek;

.Div200px { background:#000 url(arka plan resminin yolu) no-repeat top left;}

Aynı kodlamayı bir de uzun şekilde yapalım ne dersiniz?

.Div200px { background-color:#000000; background-image:url(arka plan resminin yolu); background-position:top left; background-repeat:no-repeat;}

Her bir özellik için ayrı ayrı kod yazdık. Oysa ki hepsini bir özellikte toplayıp çıkarabiliriz.

7) Tekrar yapmayın

Bir elemana stil değeri atadınız ve devam ettiniz. Aynı elemana ilerleyen kısımlarda yeni bir stil değeri atamayın çünkü html sayfalar son atanan değerleri baz alarak ekrana basar.

Birden fazla sınıf kullanabilirsiniz

Bu konu aslında biraz karışık gelebilir fakat hiç de öyle değildir. Bu kullanımda dikkat etmeniz gereken tek şey sistematiği iyi oluşturmak ve kurgulamaktır. Bir elemana birden fazla sınıf verebilirsiniz fakat sınıflarınız sırayla işler. Eğer birden sonra kullandığınız sınıflar ilk sınıfın değerlerini ezerse işte o zaman iş tamamen çöp olur. Daha basit bir örnekle anlatırsak;

<div class="Div300px">300px</div>

300px isimli bir sınıfım var ve ben bunu bir div e atadım. Bu div 300px sınıfının özelliklerini aldı. Ama ben istiyorum ki daha önce oluşturduğum ve başka özelliklere sahip sınıfları da atayayım;

.KirmiziRenk { color:#FF0000;}
.Koyu { font-weight:bold;}
.Div3000px { float:left; display:inline; width:300px; height:300px; overflow:hidden; background-color:#FFFFFF;}

Sınıflarım hazır. Şimdi atayabilirim;

<div class="Div300px Kirmizi Koyu">300px</div>

Bu şekilde bu div içinde yer alan elemanlar sırayla verdiğim sınıfların özelliklerini alacaklar. Ben bu yöntemi genelde margin ve padding ayarlarını kullanırken uyguluyorum.

9) Framework yani çatıları kullanmaya gayret edin

Css kodlaması yaparken css frameworkleri kullanmaktan çekinmeyin. Bu çatılar hem işini kolaylaştıracak hem de sizin gözden kaçırdığınız yerleri, konuları kapatacaktır. Çatılar ile ilgili yazımı okumak için buraya tıklayın