Kullanışlı CSS Kodu Yazmanın 10 İpucu

CSS kısa adıyla bildiğimiz ve Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları olarak söylenebilen bu web teknolojisi sayesinde HTML haricinde de metin ve format biçimlendirme yapılabilmektedir. CSS ile yazı tipi, renk ve boyut gibi çeşitli biçimlendirmeler bir kez tanımlanarak HTML sayfası içerisinde gerektiği yerlerde çağırarak hem boyut tasarrufu sağlanabilir hem de yapılan iş daha pratik bir hâl alır.

CSS kodlarının çıkış amacı yapılan işi kolaylaştırmak olmasına rağmen yazılan kodlar kullanışlı olmadığı takdirde işleri kolaylaştırmak yerine zorlaştırabilir ve hatta büyük bir proje üzerinde çalışıyorsanız işler içinden çıkılmaz bir duruma gelebilir. Bu tür durumlarla karşı karşıya kalmamak için baştan sona kullanışlı CSS kodları yazabilmek için çeşitli iyileştirmeler uygulanabilir.

css kodları

3 Temel CSS Kod Yazma Yöntemi

Satır içi

Satır içi yöntemi ile HTML dosyası oluşturulurken aynı zamanda da nesnelere ait gerekli CSS biçimlendirme kodları yazılabilir. Bu şekilde yalnızca geçerli nesne biçimlendirilebilir.

<a href="#" style="color: #d35400;">

Gömülü

Alternatif bir yöntem olarak CSS kodları sayfanın üstünde <head> etiketleri içerisine gömülerek kullanılabilir. Bu şekilde yalnızca stil kodlarının gömülü olduğu sayfada biçimlendirme uygulanabilir.

<style type="text/css">
p { font-size: 16px; }
</style>

Harici

Harici bir CSS dosyası yardımı ile biçimlendirme yöntemi, çok basit projeler dışında hem en fazla kullanılan hem de en pratik yöntem olma özelliğine sahiptir. Bu yöntem kullanılarak oluşturulan harici stil dosyası işlem yapılacak sayfalara çağrılarak bu sayfada biçimlendirmelerin uygulanabilmesine olanak sağlar.

<link rel="stylesheet" type="text/css" href="style.css" />

Daha Kullanışlı CSS Yazmak İçin 10 İpucu

1. Kodları Düzenli Tutun

Gündelik hayattaki işlerde olduğu gibi CSS yazarken de düzenli olmanın karşılığını fazlasıyla alabilirsiniz. Daha az karmaşaya yol açarak, aradığınızı daha çabuk bulabilir ve işlerinizi daha kısa sürede halledebilirsiniz. O an ihtiyaç duyulan kodları rastgele sırada yazarak kodlamak yerine belirli bir düzen içerisinde kod yazmak arasında mutlaka büyük farklar olacaktır. Kod yazarken kullandığınız sıralamayı not etmek de sizin için faydalı olacaktır.

İlk olarak en genel ve en önemli kodlar yazılarak işe başlanmalı. Sonrasında sayfa düzenine göre yukarıdan aşağıya doğru kodlar yerleştirilebilir. Bu şekilde kod yazmak hem ilerideki düzenlemeler için kolaylık sağlayacaktır hem de projede başka biri çalıştığında çok daha hızlı çözümleme yapabilecektir.

1. Genel Öğeler (body, a, p, ...)
2. #header
3. #menu
4. #content
/****** içerik kodları ******/
5. #footer

2. Satır İçi CSS Kullanmayın

Satır içi CSS kodları kullanılarak oluşturulan tasarımların birçok dezavantajı mevcuttur. En büyük dezavantaj ise stil biçimlendirmelerinin sayfadan bağımsız olarak gerçekleştirilememesidir. Bu ise, stil değişikliklerinin her sayfaya ayrı ayrı uygulanma gerekliliği, stil bütünlüğünün bölünmesi ve sayfa açılış hızlarında gereksiz yükselme gibi sorunlara neden olmaktadır.

Sayfadaki tüm nesneleri tek tek değiştirmek çok büyük bir yük getireceğinden satır içi CSS kodlarının kullanımı uygun olmayacaktır. Alternatif yöntemler sayesinde CSS dosyasında tek bir değişiklik yaparak tüm sayfalarda bu değişikliği ilgili nesneye yansıtabiliyorken bu şekilde bir kullanım zorluktan başka bir şey getirmeyecektir.

3. Tasarımı ve İçeriği Ayrı Tutun

CSS kodlarını kullanmanın en büyük nedenlerinden birisi de tasarımı ve içeriği birbirinden ayrı tutmaktır. Bu şekilde; biçimlendirmeler çok daha kolay ve çok daha hızlı uygulanırken, içerik geliştirici ve tasarımcı da birbirinden bağımsız olarak çalışabilmektedir.

4. Tarih, Başlık ve İmza

CSS kodlarının üst kısmında iletişim bilgilerinin bulunması, tasarım hakkında soru sormak isteyenler için gerçekten yararlı olabilir. Özellikle başkaları için tasarım yaparken bu daha yararlı olacaktır. Bir de renk kodlarını üst kısma yerleştirerek renklerin daha iyi algılanmasını sağlayabilir ve düzenleme ihtiyacı ortaya çıktığında karışıklık yaşamadan hızlıca düzenleme yapılmasına olanak sağlamış olursunuz.

/*======
kod.gen.tr
Copyright 2015
 
renk skalası
-------------
3498db - açık mavi
2980b9 - mavi
7f8c8d - koyu gri
bdc3c7 - gri
======== */

5. Şablon Kütüphanesi Oluşturun

Çoğu zaman benzer CSS şablonu kullanıyor olabilirsiniz. Bu tür durumlarda tamamen sıfırdan başlamak gereksiz olacaktır. Bu nedenle bir şablon kütüphanesi oluşturarak oluşturduğunu CSS şablonlarını burada saklayabilir ve yeni bir projeye başladığınızda 1-0 önde olabilirsiniz.

6. CSS Kodlarını Kısaltın

Gerek zamandan kazanmak gerekse tarayıcının web sitesini yorumlasını hızlandırmak için CSS kodlarını en kısa şekilde kullanmak gerekir. Bir örnekle açıklamak daha iyi olacaktır.

#icerik {
margin-left: 3px;
margin-top: 5px;
margin-bottom: 6px;
}

Bu şekilde kullanmak yerine aşağıdaki gibi kullanmak daha uygun olacaktır.

#icerik {
margin: 5px 0px 6px 3px; // üst, sağ, alt, sol şeklinde sıralanmıştır.
}

7. Alt Çizgi Yerine Tire Kullanın

Bazı eski versiyon tarayıcılarda alt çizgi tanınmayabilir ve hatalarla karşılaşılabilir. Bu tür bir hata ile karşılaşmamak için CSS etiketinde alt çizgi yerine tire kullanarak kelimeleri bölmek daha sağlıklı bir yöntem olacaktır.

8. Reset CSS Kullanın

Reset CSS kullanarak tarayıcılardaki boşlukları sıfırlayabilir, farklı tarayıcılarda sayfanın orasının burasının kaymasını engelleyebilirsiniz. CSS kodu yazmaya başlamadan önce ilk olarak Reset CSS kodları yazılmalıdır. Reset CSS kodlarını CSS Reset adresinde bulabilirsiniz.

9. Gecko, IE ve Webkit Uyumlu Yazın

Yazılan kodlar Gecko tarayıcılarda (Netscape, Firefox, Mozilla, …) doğru çalışıyorsa muhtemelen İnternet Explorer ve Webkit tarayıcılarda (Chrome, Safari) da düzgün çalışacaktır. Bu nedenle zamandan kazanmak için öncelikle Gecko tarayıcılar için CSS kodları yazmak en iyisidir. Sonrasında gerekli düzenlemeler diğer tarayıcılar için yapılmalıdır.

10. CSS Kodlarınızı Doğrulayın

Kod yazarken işler çoğu zaman planlandığı gibi gitmez ve sinir bozucu bir durum ortaya çıkabilir. Bu tür durumlarda zaman kazanmak için bazı yaygın hataları W3C CSS Validator tespit edebilir. Projedeki düğümleri çözmek ya da gözden kaçan hataları yakalamak için gayet kullanışlı ve ücretsiz bir araç.

23.05.2015 CSS Yorum yapılmamış

, ,

Yorum yapılmamış

Yorum Yazın

kod.gen.tr