CSS Kodlama Teknikleri ve CSS Kodlarýný Azaltma Yöntemleri
Yaptýðýmýz siteleri kodlarken en az kodla ve en düzenli kodlamayý nasýl yaparýzý araþtýrmalýyýz. Bu konu çok önemli bir konudur burada bunun yöntemlerini anlatmaya çalýþacaðýz. (X)HTML ve CSS kod azaltma bizlere bir çok avantaj saðlar. Az kodun anlamý hzýlý eriþimdir. Ayrýca az kod sitemizin bulundurulduðu sunuculara az yük ve az bantgeniþliði kullanýmý demektir. Bu bizleri ve sistem yöneticilerini sevindiren bir haberdir. Bu makale ayný zamanda CSS kodlama tekniklerini öðretecektir.
1- Torun Seçicileri kullanmak
CSS kodlamada bize çok büyük yardýmý olan Torun Seçicileri bir örnek vererek göstereceðiz. Bir web sayfasýný bir bölümünü kodlmaka için iki yöntem göstereceðiz. Torun Seçicilerin kodlamadaki önemini daha iyi kavrayacaðýz.
Genelde siteler üst kýsým, sol kýsým, içerik kýsmý, sað kýsým ve alt kýsým gibi belli genel parçalara ayrýlýr. Bu örneðimizde "solkolon" adý verilen bir katmanýmýzýn(<div>) kodlamasýný göreceðiz. Tüm sol bölümü içine alan bir kapsayýcý katmanýmýz ve içerik bölümü mevcuttur. Ýlk yöntemimiz bir çok sitede de kullanýlan her elemente bir sýnýf atmasý yaparak kodlama yöntemidir.
a - Sýnýf Kullanýmý
<div id="solkolon">
<h3 class="solkolonbaslik">Site Hakkýnda </h3>
<p>Site hakkýndaki yazýlar </p>
<h3 class="solkolonbaslik">Öneriiler</h3>
<ul class="solkolonlink">
<li class="link"><a href="arkadaslar.html">Arkadaþlar</a></li>
<li class="link"><a href="siteler.html">Siteler</a></li>
</ul>
</div>
Yukarýdaki kodlama bir çok web sitesinde kullanýla gelmiþ bir yöntemdir. CSS’in gücünü ilk olarak keþfeden kodlamacýlar her elemente bir sýnýf tanýmlamasý yaparak kullanmayý tercih ede geldiler.
Yukarýdaki kodlamada iki h3 elementine "solkolonbaslik" sýnýfýný tanýmladýk. Bu sýnýfa verilen özellikler sadece bu iki h3 elementine uygulanacaktýr. Ayný iþlem ul ve li elementleri içinde geçerlidir.
Baþlýklara serif fontu, turuncu rengi ve kenarlýk ekleyelim ve listelerimizinde yanýndaki iþaretleri kaldýralým:
.solkolonlink {
list-style-type: none;
}
.link {
font-weight: bold;
}
Tanýmladýðýmýz özellikleri elementlere atadýk, buradaki elementlerin kendine has tanýmlarý vardýr. Ayný yöntemi kullanrak tüm sayfamýzý kodlayabilriz.
Yazdýðmýz kod sorunsuz çalýþýyor. Ancak bu kullanýmda her element için bir sýnýf tanýmlamasý gerekecektir. Bu belli bir zamandan sonra çok kullanýþsýz ve zor bir yöntem halini alacaktýr. þžimdi ikinci yönteme göz atalým.
b- Doðal Seçiciler
<div id="solkolon">
<h3>Site Hakkýnda </h3>
<p>Bu site benim hakkýmdadýr.</p>
<h3>Fotoðraflarým</h3>
<ul>
<li><a href="eskifoto.html">Eski</a></li>
<li><a href="yenifoto.html">Yeni</a></li>
</ul>
</div>
Görüldüðü gibi tüm sýnýf atamalarý kaldýrýlmýþtýr. Peki tüm sýnýflarý kaldýrdýysak elementlere nasýl atama yapacaðýz? Elemetnleri tanýmlarken #solkolon tanýmýmýz içine giriyoruz. Her elemente stil atamak için solkolon id’li elementini referans alýyoruz. Örneðin solkolon içindeki h3 elementinlerine (#solkolon h3) þeklinde özel tanýmlamalar yapabiliyoruz. Bu yöntem ile kullandýðýmýz kod sayýsý azalacak ve kodlarýmýz daha anlaþýlýr hala gelecektir. Bu yöntem ile bir çok elemente sýnýf tanýmý yapmaktan kurtulacaðýz.
Bu yöntemi sadece bir bölüme uyguladýk(solkolon kýsmýna), ancak bu iþi tüm sayfa ve site bazlý da yapabilriz. Örneðin icerikAlani, altKisim bölümlerine de uygulayabiliriz. Bu uygulama bize her bölümde farklý atamalar yapmamýza izin verir. Mesela #icerikAlani kýsmýnda ki h3 elementini kýrmýzý #altKisim bölümündeki h3 elementini mor yapabiliriz. Ayrýca tüm bölümlerdeki h3‘lerede genel bir tanýmlamada yapabilriiz.
h3 {
font-family: Georgia, serif; /* tüm h3 ler için atama*/
}
#icerikAlani h3 {
color: red;
}
#menuAlani h3 {
color: orange;
}
Genel h3 elemetine serif font ailesi tanýmlanmý, icerik alanýndaki h3 kýrmýzý, menu alanýndaki h3 kavuniçi olacaktýr. Böylelikle bir çok kod ve sýnýf tanýmýndan kurutulmuþ olduk.
Bu kodlama metodu sadece kod azaltmaya deðil ayrýca kodlarýmýzý daha okunaklý ve organize kullanmamýzý saðlamaktadýr. CSS tabanlý hazýrlanmýþ büyük çaplý sitelerde bu metod bize çok büyük kazanýmlar saðlayacaktýr.
Fazladan sýnýf kullanmak yerine Torun Seçicileri kullanarak kod azaltma yöntemi bize çok büyük avantajlar saðlayacaktýr.
<div id="solkolon">
<h3>Site Hakkýnda </h3>
<p>Bu site benim hakkýmdadýr.</p>
<h3>Fotoðraflarým</h3>
<ul>
<li><a href="eskifoto.html" class="kirmizilink" >Eski</a></li>
<li><a href="yenifoto.html" class="kirmizilink" >Yeni</a></li>
</ul>
</div>
ve bu sýnýf için css tanýmý yapacak olursak.
a:link.kirmizilink {
color: red;
}
Bu kodumuz sorunsuz çalýþacaktýr. Ancak bu kodlama metodunda ileriye dönük bir sorunuzmu olacaktýr. Bu linklerin rengini deðiþtirip siyah yapmak istedik. Rengi kolayca siyaha çevirebiliriz ancak verdiðimiz isim ile içerik çakýþacaktýr. Siyah renge kirmizi isim!
Bunun yerine doðal seçicileri kullanrak bu iþlemi yapsa idik durum farklý olacaktýr.
#SolKisim li a:link {
color: red;
}
Bu tanýmla bizim iþimizi görecektir. Ayrýca bir deðiþiklik olduðunda sadece tanýmý deðiþtirmemiz bize yetecektir. Bu metod bize kolay, temiz ve kullanýþlý bir kodlama olanaðý saðlamkatadýr. Bunu uygulamarýmýzda kullandýkça daha iyi kavrayacaðýz.
2- Gereksiz <div> Kullanýmýndan vazgeçilmesi
Sayfa kodlarken içeriklerimizi düzenlemek için bir çok <div> elementi kullanýrýz.
<div id="menu">
<ul>
<li><a href="foto.html">Fotoðraflar</a></li>
<li><a href="ders.html">Dersler</a></li>
<li><a href="bize_ulasin.html">Bize Ulaþýn </a></li>
</ul>
</div>
Yukarýdaki kodlmada da görüldüðü gibi bir liste ve bunu çevreleyen bir menu id’si verilmiþ bir katman kullandýk. Bu kullanýmý tüm sitemizde kullandýðýmýz düþünürsek bir çok kavrayýcý fazla katmanýmýz olacaktýr. Eðer bu kod daki gibi katman bir blok level bir elementi kapsýyorsa katman kullanýmýna gerek yoktur. Bu katmaný kaldýra biliriz.
<ul id="menu">
<li><a href="foto.html">Fotoðraflar</a></li>
<li><a href="ders.html">Dersler</a></li>
<li><a href="bize_ulasin.html">Bize Ulaþýn </a></li>
</ul>
Yukardaki gibi bir kodlama ile kavrayýcý katman kullanýmý ile ayný iþlemleri yapabiliriz buradaki ul elementi bir blok-level elementi olduðu için kavrayýcý katmana uyguladýðýmýz bir çok özelliði(padding, margin, vd.) bu elemente de uygulayabilriz. Bu sayede bir çok kavrayýcý katmandan kurtuluruz.
Burada þuna dikkat edilmelidir ki eðer bu kavrayýcý katman yerine kullanýlan elementin içinde baþka bir element yok ise bu yöntem uygulanýr. Ýçinde <p>, <blockquote> veya <form> gibi elementler varsa bunlarý tanýmlama yaptýðýmýz kavrayýcý ul dýþýna çýkarmalýyýz.
3- CSS’in kalýtsallýk özelliðinden yararlanmak
CSS elementleri kalýtsal olan ve kalýtsal olmayan elementler diye ayýrýr. Biz kalýtsal elemnleri kullanarak bir çok fazla koddan kurtulabiliriz.
p { font-family:Verdana, Arial, sans-serif }
td { font-family:Verdana, Arial, sans-serif }
li { font-family:Verdana, Arial, sans-serif }
dt { font-family:Verdana, Arial, sans-serif }
dd { font-family:Verdana, Arial, sans-serif }
Yukarýdaki þekilde bir çok element içinde font tanýmý yapmak yerine body elementi içinde bir tek font tanýmý ile bu kargaþaya son verebilriz. Bu site standartlarýna uymayý kolaylaþtýracak ve düzenleme kolaylýðýný saðlayacaktýr.
body { font-family:Verdana, Arial, sans-serif }
4- Uygun Benzer Stilleri Gruplamak
Bir çok özelliði ayný olan stil tanýmlarýnda farklýlýklar ayrýlarak ayný bölümler gruplanarak kod azaltýlabilir.
h1,h2,h3,h4 { margin-bottom:0; font-family:Verdana,sans-serif }
h1 { font-size:120% }
h2 { font-size:110% }
h3,h4 { font-size:100% }
5- CSS Kýsaltmalarýný kullanmak
CSS bazý elementlerin tanýmlasýný yaparken kýsaltmalarý kullanmamýza izin verir, yani ayný etkiyi daha az kodla yapmamýza olanak saðlar. Ayrýntý için CSS’de Kýsaltmalar kýsmýna bir göz atýn.
6- CSS kodunu katagorilere ayýrmak
CSS’i Web Sayfalarýna Eklemek makalesinin 4. kýsmýnda da bahsettiðimiz gibi, içeriði büyük olan sitelerde css kodunun parçalara ayrýlmasý ve kullanýlan sayfa CSS’inde hangi parçalar gerekli ise onlarýn import edilmesi önerilir. Bu sayade kodun bir kýsmýnda yaptýðýmýz deðiþiklik için tüm css kodu incelenip deðiþtirilmesi gerekmez ve kod yönetimi kolaylaþýr.
CSS Kodlama Teknikleri ve CSS Kodlarýný Azaltma Yöntemleri
Normal
