CSS Kod Yazma

CSS Kod Yazma : CSS yazarken bazı kurallar koyarsak ve bu kurallara göre kodumuzu yazarsak bir çok konuda yararını göreceğiz.

Daha hızlı kod yazma: Belli bir standardınız oluşturunca kod yazmak daha hızlı olacaktır.
Birden fazla kişinin çalıştığı durumlarda kolaylık sağlar: Aynı kodlama düzenine sahip olmak beraber çalışmayı kolaylaştırır. Koordinasyonu arttırır.
Daha okunabilir kodlar elde ederiz.
Daha performanslı sayfalar elde ederiz.
Daha sonra kodları güncellememiz gerektiğinde bize kolaylıklar sağlar. Mesela bir projeyi bitirdik 3-4 ay sonra değişiklik geldiğinde düzenimiz standart olduğu için düzeltmelerimizi daha kolay yaparız.

CSS kodu yazarken bazı standartlar oluşturmanın avantajlarından bahsettik yukarıda. Peki bu standartlar nasıl olmalı neler yapmalıyız ki optimum kod elde edelim.

1. CSS doküman indeksini oluşturun

CSS dokümanınız indeksini hazırlayınız. Büyük projelerde tercih edilecek bir husus bence. Şimdiye kadar hiç uygulamadım ama büyük projelerde uygulamanın yararlı olacağını düşündüğüm bir uygulama

01
/*------------------------------------------------------------------

02
[CSS Kod indeksi]

03
1. Body

04
2. Üst Alan / #ustAlan

05
2.1. Menü / #menu

06
3. İçerik Alanı / #icerik

07
 3.1. Sol Kolon / #solKolon

08
 3.2. Sidebar / #yanKolon

09
 3.2.1. RSS / #rss

10
 3.2.2. Arama / #arama

11
 3.2.3. Kutular / .kutu

12
4. Alt Alan / #altAlan

13
-------------------------------------------------------------------*/

2. CSS dokümanınıza imzanızı atın

Kod yazarının veya yazarlarının imzası ve genel bilgilerini yazarak kodlarımızı başlamalıyız.(Bende bunu ara sıra unutuyorum. Ama unutmamak gerekli)

1
/************************

2
************************

3
MYK Medya - http://myk-medya.com/

4
yahoyt.com

5
fatih hayrioglu

6
28 Mayis 2009

7
ie6, ff, opera. chrome,  safari

8
************************

9
************************/

3. Seçici isimlendirirken standart ve anlamlı isimler verin

Seçici isimleri ve genel isimlendirmede bir standardı oturtun.

Anlamlı isimler verin. Anlamlı isimler vermek kod yazarken ve daha sonrası için çok büyük kolaylık sağlayacaktır. XHTML kodların nasıl bir anlamı(body, p, form vd.) varsa, kendi oluşturduğumuz seçici isimlerinde bir anlamı olması mantıklıdır.

#maviKutu yerine #haberKutusu veya #haberAlani tanımı daha mantıklı ve anlamlı bir isimlendirmedir.

İsimlendirmede bir standardınız olsun. Benim standardım bu konuda ilk harf küçük, sonraki kelimelerin baş harfi büyük ile başlar ve bitişik yazılır.

`1`	`#icerikOzu{..}`

`2`	`#solIcerikAlani{..}`

Bu benim standardım. Başka türlü standartlarda vardır. Her kesin kendince bir standardı olabilir. Mesela alt çizgiyle ayıranlar var. (-)Tire ile ayıranlar var.

`1`	`#icerik_ozu{..}`

`2`	`#sol-icerik-alani{..}`

Bu standardı herkes kendince yapabilir. Benim önerim aynı projede çalışan insanların aynı kodlama yöntemini kullanması, diğer türlü pek hoş olmuyor. Göz aşina olmayınca bir eksik hissediyor insan kod yazarken.

4. Kısaltma kullanın.

CSS tanımlarında kısaltmaları kullanın. CSS kısaltmaları hakkında daha fazla bilgi için http://www.fatihhayrioglu.com/cssde-kisaltmalar/ okumanızı tavsiye ederim.

`1`	`font-weight:` `bold;`

`2`	`font-family:` `verdana,` `sans-serif;`

`3`	`font-size:` `11px;`

`4`	`line-height:` `15px;`

yerine

`1`	`font:` `bold` `11px/15px` `verdana,` `sans-serif;`

5. CSS dokümanlarınızı anlamlı bölümlere ayırın.

Büyük projelerde css dokümanlarını birden fazla bölümlere ayırarak daha düzenli ve kolay kodlanabilir dokümanlar elde ederiz.

`1`	`@import` `url(/css/iskelet.css);`

`2`	`@import` `url(/css/fontlar.css);`

`3`	`@import` `url(/css/renkler.css);`

`4`	`@import` `url(/css/sifirlama.css);`

Ben yukarıdaki yöntemi genelde çok büyük projelerde kullanmayı tercih ediyorum. Normalde ve genellikle tek ve iki css dokümanı ile projeyi bitiriyorum. Performans açısından bu daha iyi ayrıca.

Eğer CSS sıfırlama tekniklerinden birini kullanacaksam Bunu imzadan sonraya yazmak. Yada site genel tanımlarını başa yazmak. YUI CSS Reset ve Eric Meyer?in ki var mesela.

01
/************************

02
************************

03
MYK Medya - http://myk-medya.com/

04
fatih hayrioglu

05
28 Mayis 2009

06
ie6, ff, opera. chrome,  safari

07
************************

08
************************/

09

10
body{margin:0; padding:0;}

11
ul{margin:0; padding:0; list-style:none;}

12

13
/*kapsayamam sorunu */

14
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

15
.kapsayamamaSorunu{display: inline-block;}

16
/* IE-mac de bu bolumu sakla  \ */

17
* html .kapsayamamaSorunu{height: 1%;}

18
.kapsayamamaSorunu {display: block;}

19
/* IE-mac bu bolumu saklam  artik */

20
/*kapsayamam sorunu */

6. Her satıra bir tanım yöntemini kullanın

CSS özelliği tanımlarken her satıra bir tanım yazarak daha uygun kod elde edebiliriz.

Ben daha önce her satıra bir özellik tanımı yapıyordum.

1
#aramaAlani{

2
 float:left;

3
 width:265px;

4
 background-color:#fff;

5
 border:3px solid #525252;

6
}

Bu yöntemde kod açık ve görüntü olarak daha kullanışlı görünse de, fazla boşluklar sorun oluşturmaya başladı. CSS kodları çok uzayınca kaydırma çubuğu ile çok aşağılara in yukarı çık zaman kaybına neden oluyordu.

Her Satırda Bir Tanım Yapma Yöntemi

Bende her satıra bir tanım yöntemini kullanmaya başladım. Aslında benim bu yönteme ilk geçme nedenim olan optimizasyonda css kodlarımı optimize ederken fazla boşluklardan kurtulmam gerektiğiydi. Daha sonra bu yöntemin daha avantajlı olduğunu gördüm, ayrıca daha derli toplu kodlar oluşturmama yaradı. Bundan sonra böyle kod yazamaya başladım.

1
#anaKapsul{...} 

2
#ustalan{...} 

3
#icerikAlani{...} 

4
#solIcerikAlani{...} 

5
#sagIcerikAlani{...}

6
#altAlan{...}

Kodlarımızın daha okunabilir olması içinde girintili bir yapıyı tercih etmeliyiz.

`1`	`#icerikAlani{float:left;` `clear:left;` `padding-top:20px;}`

`2`	`#solIcerikAlani{float:left;` `width:647px;` `margin-right:13px}`

`3`	`#icerikOzu{float:left;` `clear:left;` `margin-top:20px}`

`4`	`#sagIcerikAlani{float:left;` `width:300px;` `margin:0;}`

7. Kodlarınızı yorum satırları ile açıklayıcı hale getirin.

Kodumuzun anlaşılabilir olması için yorum satırları eklemeliyiz. Bölümleri ve özel alanları yorum kodu ile belirleyerek anlaşılabilirliği arttırabiliriz. Böylelikle bölümler arasında daha kolay ayrım yapabiliriz. Kod okunabilirliği daha fazla olacaktır.

01
#anaKapsul{margin:0 auto; width:960px;} 

02
/****************************************************  ustalan   */

03
#ustalan{padding-top:20px;}

04

05
/****************************************************  icerikAlani   */

06
#icerikAlani{float:left; clear:left; padding-top:20px;}

07

08
/*sol icerik alani */

09
 #solIcerikAlani{float:left; width:647px; margin-right:13px}

10
 #icerikOzu{float:left; clear:left; margin-top:20px}

11

12
/* sagIcerikAlani */

13

14
 #sagIcerikAlani{float:left; width:300px; margin:0;}

8. CSS özellik tanımlarını sıralayın.

Özellik tanımlarında sıralama uygulayın. Özellik tanımlarında şablon tanımlarını başta yazmak. CSS tabanlı kodlama yazarken site yapısını oluşturan özellikler(float, width, height gibi özellikleri) ilk sırada yazıp sonra diğer özellikleri yazmayı tercih ediniz.

`1`	`#solIcerikAlani{float:left;` `width:647px;` `margin-right:13px}`

Burada bir diğer yöntemde özellikleri alfabetik sıraya göre yazmaktır. Buradaki amaç bir standart oluşturup göz aşinalığı sağlamak ve böylelikle daha hızlı kod yazmaktır.

Sıralayı şöyle yapmak mantıklı olacaktır.

Konumlandırma, boyutlar (width, height, position, float, clear)
Kenar için ve kenar dışı boşluklar ve kenar dışı çizgisi (margin, padding, border)
Metin tanımları (font, line-height, color)
Diğer özellikler

9. Çalışma gruplarınızda ortak standardınızı oluşturun.

Bir projede beraber çalıştığınız insanlarla aynı kodlama düzeninde çalışması çok önemlidir. Projede çalışan kişilerin bir araya gelip ortak bir düzen oluşturmaları ve projede bu düzen üzerine çalışmaları herkes açısından büyük katkı sağlayacaktır. Ayrıca css düzeltmelerinde(hack) de aynı şey söz konusu. Mümkünse aynı css düzeltmelerini kullanmanız ortak çalışılan projelerde size kolaylık sağlayacaktır.

10. CSS Editör araçlarından yararlanın

Daha öncede yazdığım gibi css editörü olarak Adobe Dreamweaver kullanıyorum. Bunun bir kaç sebebi var. Eskiden beri kullana gelmenin verdiği bir el alışkanlığı. CSS ve son sürümde de javascript editör kısımların gayet güzel çalışması.

Gelelim CSS Editörlerinin bizim CSS düzenine katkılarına

10.1 Otomatik tamamlama özelliği bize kod yazarken çok yardımcı oluyor. Bu özellik kod yazma hızımızı arttırıyor ve yanlış yazımları engelliyor.

10.2 Kodların renklendirilmesi de editörün güzel özelliklerinden biridir. Seçici, özellik, tanım ve yorum satırı ayrımı bize göstererek kod ayrımına yardımcı olur ve daha okunabilir kod görünümü sağlar.

10.3 Sık kullandığımız css düzeltmelerini(hack) snippets(dw özelliği) alanına ekleyerek hız kazanabiliriz. Daha hızlı olmak için bu tanımlara bir kısa yol bile atayabilirisiniz.

10.4 Dreamweaver?ın stil dosyalarını standarda oturmak çok kolay.

Edit -> Preferences.. tıklayınca gelen pencereden Code Format kısmını seçince sağ tarafta CSS.. düğmesine tıklayınca CSS doküman formatını ayarlama ekranından css düzenimizi ayarlayabiliyoruz.

Notepad ++ daki hizalama çizgileride çok güzel dw olmaması çok üzücü. DW?da hala tam olarak istedikleri karşılaya bilmiş değil, ama bildiğim en iyi editör.

Sonuç

Burada ben kullandığım ve araştırma sonucu elde ettiğim css düzeninden bahsettim. Bu stadartları kendinize göre değiştirebilir ve kendi stadartlarınızı oluşturabilirsiniz, Amaç stadart ve düzenli bir css kodlama düzenine erişmek. Son olarak örnek bir css dokümanı nasıl olmalıya bir örnek yazarsak:

XHTML kodu:

01
<div >

02

03
 <div >

04
 </div><!--[if !IE]>ustAlan sonu<![endif]-->

05

06
 <div >

07
 <div >

08
 <div ><img src="images/promo.jpg" width="647" height="264" alt="Promo" /></div>

09
 <div >

10
 </div><!--[if  !IE]>icerikOzu sonu<![endif]-->

11
 </div><!--[if  !IE]>solIcerikAlani sonu<![endif]-->

12
 <div >

13
 </div><!--[if !IE]>sagIcerikAlani  sonu<![endif]-->

14
 </div><!--[if !IE]>icerikAlani  sonu<![endif]-->

15

16
 <div class="kapsayamamaSorunu">

17
 </div> 

18

19
</div><!--[if  !IE]>anaKapsul sonu<![endif]-->

CSS kodu

01
/************************

02
************************

03
MYK Medya - http://myk-medya.com/

04
yahoyt.com

05
fatih hayrioglu

06
28 Mayis 2009

07
ie6, ff, opera. chrome,  safari

08
************************

09
************************/

10

11
/************************************************** Genel  Tanımlar   */

12

13
body{margin:0; padding:0;}

14
ul{margin:0; padding:0; list-style:none;}

15

16
/*kapsayamam sorunu */

17
 .kapsayamamaSorunu:after  {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

18
 .kapsayamamaSorunu{display: inline-block;}

19
 /* IE-mac de bu bolumu sakla \ */

20
 *  html .kapsayamamaSorunu{height: 1%;}

21
 .kapsayamamaSorunu  {display: block;}

22
 /* IE-mac bu bolumu saklam artik */

23
/*kapsayamam sorunu */

24

25
#anaKapsul{margin:0 auto; width:960px;} 

26

27
/************************************************** ustalan    */

28
#ustalan{padding-top:20px;}

29
 
30
/**************************************************  icerikAlani   */

31
#icerikAlani{float:left; clear:left; padding-top:20px;}

32
 
33
/*sol icerik alani */

34
 #solIcerikAlani{float:left; width:647px; margin-right:13px}

35
 #icerikOzu{float:left; clear:left; margin-top:20px}

36
 
37
/* sagIcerikAlani */

38

39
 #sagIcerikAlani{float:left; width:300px; margin:0;} 

40

41
/************************************************** altAlan  */

42

43
#altAlan{clear:left; background-color:#404040; padding:12px; margin-bottom:20px;}

Kaynaklar

Kaynak : Fatih HAYRİOĞLU, CSS dersleri