CSS Yazım Kuralları ve İpuçları
Etiketler: css ipuçları,
Bu makalemizde CSS`de dikkat edilmesi gereken kod yazım kurallarını, ipuçlarını ve css kod yazma düzeni hakkında bazı bilgileri göreceğiz.

1.Büyük Küçük Harf Kuralı

CSS ile stil şablonları oluşturmaya başladığımızda dikkat etmemiz gereken en önemli husus büyük-küçük harf uyumudur. CSS belgemizde nasıl tanımlama yaptıysak aynı şekliyle sayfamızda kullanmamız gerekmektedir. Aşağıdaki kodları inceleyelim.

.Alt_Bolum { background : #eee; border : 1px solid #333; padding : 5px; }

Yukarıdaki kod satırımızda Alt_Bolum adında bir class ( sınıf ) tanımladık. Tanımladığımız bu sınıfı sayfa içerisinde kullanırken class="Alt_Bolum" şekliyle kullanmamız gerekir. Burada yapılan en büyük hata büyük küçük harflerin yazımı ile olmaktadır. Özellikle yoğun kodlama gerektiren işlerde bu karışıklık olma ihtimali daha yüksektir. Tanımladığımız kodu sayfa içerisinde gösterirken class="alt_bolum" olarak kullanırsanız stil uygulamasının sayfada işlevselliğini kaybettiğini görebilirsiniz.

2.Boşluk Karakteri

Stil tanımlamalarımızda boşluk tuşuyla bir tanımlama yaptığımız taktirde oluşturduğumuz kod satırındaki stil sayfamıza uygulanmayacaktır. Örneğimizi inceleyelim.

.Alt Bolum { background : #eee; border : 1px solid #333; padding : 5px; }

Alt Bolum arasında - _ gibi ifadeler koyarsak kodumuz işlevsellik kazanabilir.

3.Kısaltmalar

Evet evet yanlış duymadınız CSS bize bu kolaylığı sağlıyor Uzun projelerimizde kod yükünü son derece hafifletir ve bizi daha uzun kod satırları yazmaktan kurtarır. Font, background, margin, padding, border, renk, listeler`in kısaltılmış yazım kuralları mevcuttur. Bir sonraki makalemizde CSS`de kısaltmalar konusunu ele alacağız. Kısaltmalarla ilgili aşağıdaki örneğimizi inceleyelim.

padding-top: 3px;
padding-right: 5px;
padding-bottom: 6px;
padding-left: 8px;

kullanımının yerine,

padding : 3px 5px 6px 8px; kodunu kısaltmasını kullanabiliriz. Burada padding değerleri üst, sağ, alt sol olmak üzere saat yönünde ilerlemektedir.

4.Açıklamalar

Stil şablonunda neyin nerede olduğunu görmeniz açısından son derece önem arzeder. Açıklama satırı stil şablonunu etkilemez kullanımı /* */ şeklindedir. Örneğimizi inceleyelim.

/* genel tanımlamalar */
body { font: 14px Arial, Helvetica, sans-serif; color : #333; }

5.Editör Kullanımı

CSS kullanımında yenide olsanız bu işe aşina da olsanız CSS Editörlerinin büyük etkisini görürsünüz. Benim kullanmış olduğum Dreamveawer programının birçok artısı bulunmaktadır. Kod tamamlama özelliği sayesinde hatasız ve hızlı kod yazmamıza olanak sağlamaktadır. Ayrıca kod renklendirme özelliğide kodlarımızı daha kolay yorumlamamızı sağlar.

5.Tanımlamalar

Kodlara hemen müdahale edebilmek ve ne nerede arayıp zaman kaybetmemek için tanımlamalarınızı global oluşturun. Örneğin sağ alan için oluşturacağınız kısma burasi surasi gibi isimler yerine sag, right gibi belirtilen bölümü tanımlayan ve anlamlı ifadeler kullanın.

6. @import Metodu Kullanımı

Uzun projelerde faydasını anlayacağınız bu özellik sayesinde CSS belgenizi sayfalara bölebilirsiniz. Bunun içinde @import metodunu kullanabilirsiniz. Aşağıdaki örneğimizi incleyelim.

@import url(/stil/ana.css);
@import url(/stil/renk.css);
@import url(/stil/font.css);