“Temiz CSS” İpuçları

CSS kullanıyorsunuz. Hazırladığınız web sayfaları göze pek hoş görünüyor. Peki perdenin arkasında da durum böyle mi? Karman çorman kodlama yapıp “Çalışıyor ya” diyenlerden misiniz, yoksa sayfa hiyerarşisine her zaman bağlı mısınız? Bu yazı işinize yarayabilecek bazı küçük ipuçları içeriyor. Temiz çalışmak her zaman güzeldir 🙂

CSS tiplerinizi sınıflandırın

Hazırladığınız CSS dosyalarında gruplandırma yapın (Zemin, formlar, tipografi gibi). İlk bakışta hangi kodun ne iş yaptığını anlamak için de başına bir açıklama notu ekleyin. İnanın zararınıza olmayacak.

/* Örnek CSS dosyası
Icerik:
gorunum
formlar
tipografi
*/

/* gorunum ———————————————– */
/* tipografi ———————————————– */
/* formlar ———————————————– */

CSS kodlarını bu şekilde parçalara ayırmak ilk başta insanı zorlayabilir. Genel görünüşü etkileyen kodları “görünüm”, formlarla ilgili kodları da “formlar” ismiyle gruplayabilirsiniz.
Bir diğer gruplama şekli de fiziksel gruplamadır. Üst bölüm, orta bölüm, alt bölüm, yan menü gibi gruplandırmalara gidebilirsiniz.

Stylesheet ekleyin

Kodları kontrol altında tutabilmenin bir diğer yolu da, ayrı ayrı .css dosyalarında tutmak olabilir. Böylece dosyanın isminden ne ile ilgili olduğunu da kolayca anlayabilirsiniz:

@import url(“gorunum.css”);
@import url(“tipografi.css”);
@import url(“formlar.css”);

Pasifleştirin

Her an ihtiyacınız olabilecek bazı kod parçalarını yedekte tutun. Böylece onları istediğiniz anda aktive edebilir, kodu tekrar yazmak zorunda kalmazsınız.

#footer
{
border-top: 1px solid #e5e5e5;
/* border-bottom: 1px solid #e5e5e5; */
}

Divlerin kaydını tutun

Divleri açtıktan sonra araya onlarca satır yazı, farklı farklı kodlar girmiş olabilir. Böyle bir durumda div etiketlerinin nerede kapatıldığını kestiremeyebilirsiniz. Basit bir çözüm bulun. Kapama etiketlerini işaretleyin:


<div id="content">
<h2><!-- #content SON--></h2>
</div>

Bunlara benzer küçük yöntemlerle CSS kodlamayı bir zevk haline getirebilirsiniz. Unutmayın, iyi kodlama yapıp yapmadığınızı anlamanın en güzel yolu, kodlarınızı bu işten anlayan birilerine göstermektir. “Tebrikler” diyorlarsa sevinebilirsiniz, “Ne yazmışsın anlamadım!” diyorlarsa unutun gitsin. Hem algoritmanın, düzenli yazmanın ne önemi var canım!

Örnekler Huddle Together‘dan alındı.

Sevebilirsin...

1 Yanıt

  1. talha dedi ki:

    teşekkürler güzel bilgiler 🙂

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir