css kod yaPMA

CSS Kod Yazma Düzeni

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[Linkleri görebilmek için üye olun veya giriş yapın.]

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) [Linkleri görebilmek için üye olun veya giriş yapın.]

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

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

3	MYK Medya - [Linkleri görebilmek için üye olun veya giriş yapın.]

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.[Linkleri görebilmek için üye olun veya giriş yapın.]

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.[Linkleri görebilmek için üye olun veya giriş yapın.]

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 [Linkleri görebilmek için üye olun veya giriş yapın.] okumanızı tavsiye ederim.[Linkleri görebilmek için üye olun veya giriş yapın.]

1	font-weight: bold;

2	font-family: verdana, sans-serif;

3	font-size: 11px;

4	line-height: 15px;

yerine[Linkleri görebilmek için üye olun veya giriş yapın.]

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.[Linkleri görebilmek için üye olun veya giriş yapın.]

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. [Linkleri görebilmek için üye olun veya giriş yapın.] ve [Linkleri görebilmek için üye olun veya giriş yapın.]‘in ki var mesela.[Linkleri görebilmek için üye olun veya giriş yapın.]

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

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

03	MYK Medya - [Linkleri görebilmek için üye olun veya giriş yapın.]

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.[Linkleri görebilmek için üye olun veya giriş yapın.]

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öntemiBende 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. [Linkleri görebilmek için üye olun veya giriş yapın.]

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.[Linkleri görebilmek için üye olun veya giriş yapın.]

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.[Linkleri görebilmek için üye olun veya giriş yapın.]

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.[Linkleri görebilmek için üye olun veya giriş yapın.]

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 [Linkleri görebilmek için üye olun veya giriş yapın.] 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ına10.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:[Linkleri görebilmek için üye olun veya giriş yapın.]

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[Linkleri görebilmek için üye olun veya giriş yapın.]

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

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

03	MYK Medya - [Linkleri görebilmek için üye olun veya giriş yapın.]

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;}