CSS(Cascading Style Sheets) gelitiriciler iin balang seviyesinde saylabilecek fakat arivinizin bir kesinde yer almas gereken,

baz pahal hatalardan kanmak adna gz gezdirmenizin yararl olaca CSS Gelitiricilere 30 pucu

1. Anlalr Olmak
CSS kodlarnzn anlalabilir olmas olduka nemli. eitli gncellemeler yapmak istediinizde kendinizi kaybetmek istemezsiniz. Kullandnz bir divin ieriini paralara blmek yerine tek bir seferde yazmanz mantkl olacaktr. 1 . h e r a n g i b i r D i v{b a c k g r o u n d :r e d ;p a d d i n g :2 e m ;b o r d e r :1 p ? x

Her stili tek bir satrda yazmanz ve divin satrndan 1 tab ieride olmas anlalrln arttracaktr. 1 2 3 4 5 . h e r a n g i b i r D i v{ b a c k g r o u n d :r e d ; p a d d i n g :2 e m ; b o r d e r :1 p xs o l i db l a c k ; }
?

2. Tutarllk
CSS iin kendi standartlarnz oluturmaya balayn. Bylelikle birden fazla projede benzer classlarla alyor olacaksnz ve hakimiyetiniz kodlar rahatlkla hatrlyor olacanzdan artacaktr. rnein bir wordpress sistemi default olarak grsel editrden bir fotoraf saa yaslarsanz otomatik olarak .captionright classn verecektir. Dolaysyla birden fazla temanzda .caption-right float: right; olarak ayn ekilde kullanyor olmalsnz.

3. Framework

Her ne kadar kullanmasam ve hatta tavsiye etmesem de araba kullanmak iin tekerlei tekrar icat etmek istemeyenler iin faydal olabilecek, size zaman kazandrabilecek olan Frameworkleri tercih eden gelitiriciler var. Benim dncem mevzu araba veya tekerlekten te arabann nasl altn bilmek ile ilgili. Kendinizi nasl rahat hissediyorsanz o ekilde devam edin. Fakat framework ile balamayn, belirli bir sre sonra doru bir adm ile framework kullanmaya balayabilir veya kendi frameworknz yazabilirsiniz. Tavsiye edebileceim 960.gs var. (Tasarlarken kullanyorum fakat CSS gelitirirken framework olarak faydalanmyorum.)

4. Reset
h1 kodu iin herangi bir stil tanmlamasanz da fontun otomatik olarak byk olduunu greceksiniz. Bu browserlarn default olarak tanmlad stil zelliklerinden biri. Ne yazk ki bu default olarak tanmlanan geler tm browserlarda ayn ekilde tanml deil. Kk bir rnek olarak Firefox 3te paragraflardan nce boluk olmasna ramen IE 7de herangi bir boluk yok. Bu tarz kk ayrntlar tasarmnzn farkl browserlarda farkl grntlenmesine neden olacaktr ve baz projelerde bu farkllklar olduka nemli. te bu noktada Reset CSS oluka zekice bir i yapp tm bu deerleri sfrlayarak bize tam hakimiyet salyor. Eric Meyer ve YUI 2yu Reset CSS olarak tavsiye ediyorum.

5. Yap
Stil dosyanz tasarmda kullandnz ge sralamasnda kodlamanz kullanl olacaktr. Genel classlar (body, a, p, h1, vs.) #header #nav-menu #main-content Ayrca her blm bana notlar almay da unutmayn. 1 2 3 4 5 / * * * * * *h e a d e r* * * * * * * * * / h e a d e rs t i lk o d l a r / * * * * * *f o o t e r* * * * * * * * * / f o o t e rs t i lk o d l a r
?

6. Elementleri Birletirmek
h1, h2, ve h3 isimleriyle 3 adet elementiniz var. tahoma fontu ve #333 rengi bu elementler iin ortak, ayrca her birinin birbirinden farkl boyutlar var. Dolaysyla ortak elementleri birlikte kodlamak ilerleyen gnlerdeki deiikliklerinizde hakimiyet ve kolaylk salar. 1 2 3 4 h 1 ,h 2 ,h 3{ f o n t f a m i l y :t a h o m a ,c o l o r :# 3 3 3 } h 1{ s i z e :2 . 1 e m } h 2{ s i z e :1 . 6 e m } h 3{ s i z e :1 e m }
?

7. nce Markup

lk bakta HTML ve CSSi ayn anda gelitiriyor olmak mantkl geliyor olabilir fakat yaplmas gereken mockup olarak HTMLi kodlamak, zorlanlabilecek ksmlar belirlemek, onlara gre zel zmleri hayal ederek HTMLli gelitirmek, ardndan CSS kodlarn yazmaktr. CSSteki eitli gereksinimlerinizde HTMLde tekrar deiiklik elbette yaplabilir. ncelikle HTMLi yazmanz default layout olarak siteyi grmenizi, temiz bir kod yazmanz salayacaktr. Ayrca gereksinimlerden dolay srekli ncelik CSS kodlarnz yenileme gereksinimizi de ortadan kaldryor olduunu farkedeceksiniz.

8. oklu Class Kullanmak

Saa yaslanm bir kutu oluturmak iin .box olarak csste kutu tasarlayp, right ile yaslama ilemini gerekletirip aadaki gibi kullanabilirsiniz. 1 < d i vc l a s s = " b o xr i g h t " > < / d i v >
?

Ufak bir not: HTML semantik olarak markup ve ierik iindir, CSS ile sunarsnz. Eer bir deiiklik iin CSS deil de HTMLi dzenliyorsunuz bir eyleri yanl yapyorsunuz demektir.

9. Doru Doctype
CSS dorulamalar Doctypenza gre yaplr, Doctypenza gre browserlar sitenizi bambaka okuyabilir. Fix Your Site With the Right DOCTYPE! bu konuda nemli bir kaynak. Ben tm projelerimde HTML5 Doctype kullanmaya baladm. 1 < ! D O C T Y P Eh t m l >
?

10. Ksaltmak
padding, margin, font gibi eitli deerlerde kodlarnz ksaltmanz gayet mmkn. 1 2 3 4 5 # r s s{ m a r g i n l e f t : 5 p x ; m a r g i n r i g h t : 7 p x ; m a r g i n t o p :8 p x ; }
?

yerine aadaki ekilde de kodlayabilirsin. 1 2 3 # r s s{ m a r g i n :8 p x7 p x0 p x5 p x ; }

?

11. Yorum
1 / *y o r u m l a r* /
?

eklinde css kodlarnza yorum ekleyebilir, belirli bir zellii /* */ arasna alarak pasif hale getirebilir, eitli buglar not alabilirsiniz.

Block Vs. Inline

Inline veya Block elemenletler: 1 s p a n ,a ,s t r o n g ,e m ,i m g ,b r ,i n p u t ,a b b r ,a c r o n y m
?

Block elemenletler: 1 d i v ,h 1 . . . h 6 ,p ,u l ,l i ,t a b l e ,b l o c k q u o t e ,p r e ,f o r m
?

Block ve Inline olarak kullanabileceiniz, clearfixe gerek duyacanz durumlar srekli kontrol edin.

13. Alfebatik Sra

Anlamsz gzkse de birka kullanmdan sonra bu ipucunu kullandnz dahi farketmeyeceksiniz. CSS element

zelliklerinizi alfebatik olarak kodlayn. 1 2 3 4 5 6 7 8 9 # a l f e b a t i k{ c o l o r :# f f f ; f l o a t :l e f t ; f o n t w e i g h t : h e i g h t :2 0 0 p x ; m a r g i n :0 ; p a d d i n g :0 ; w i d t h :1 5 0 p x ; }

?

Gz ile taramanzda uzun vadede size zaman kazandracak, ayrca firebug gibi eklentilerle cssnizi grntlediinizde otomatik olarak alfebatik sraladndan eitli deiikliklerinizi el ile gncellemek istediinizde beni hatrlayacaksnz.

14. Sktrma
CSS dosyalarnn boyutu normalde fazla byk olmaz fakat sitenizin aln bir nebze olsun hzlandrmak iin final dosyanzn satr boluklarndan CSS Compressor ve CSS Optimizer kullarak kurtulabilirsiniz.

15. Genel Classlar

#8de bahsettiimiz gibi belirli classlar srekli olarak kullanyor olacanzdan genel classlarnz kullann. Bu projeyi devrettiinizde yerinize gelecek develepera da yardmc olacaktr. 1 2 3 4 . l e f t{ f l o a t : l e f t } . r i g h t r i g h t{ f l o a t : r i g h t r i g h t } < d i vi d = " c o o l b o x "c l a s s = " l e f t " > . . . < / d i v >
?

16. Margin: 0 Auto

gelerinizi ortalamak iin float:center; yerine 1 m a r g i n :0a u t o ;
?

kullanmalsnz.

17. Div Samak

1 < d i vc l a s s = " h e a d e r t e x t " > < h 1 > H e a d e rT e x t < / h 1 > < / d i v >
?

eklinde kullanmak yerine h1i kapsayan divi parent olarak kullanp stil verebilirsiniz. 1 < h 1 > H e a d e rT e x t < / h 1 >
?

18. Firebug

Firebug eer kullanmyorduysanz napyorsanz durun, Firebug kurun. Olmazsa olmaz aracnz olacak! debug JavaScript, inspect HTML, hata bulma gibi zellikleri real-time dzenlemeler derken ertesi gn Firebug yokken gelitiriciler ne yapyordu diyeceksiniz.

19. Cross-Browser
Cross-Browser desteklemiyor olsa bile CSS ile kimi browserlara gzellikler yapabilirsiniz. Hatta sonrasnda Prefixr ile mmkn olduunca tm browserlara uygulayabilirsiniz. 1 2 . b o x{ o p a c i t y :. 5 ;
?

Cross-Browser: 1 2 3 4 5 . b o x{ ? m s f i l t e r :" p r o g i d : D X I m a g e T r a n s f o r m . M i c r o s o f t . A l p h a ( O p a c i t y = 5 0 ) " f i l t e r :a l p h a ( o p a c i t y = 5 0 ) ; o p a c i t y :. 5 ; }

20. Absolute Position

Absolute positioning sanrm en sevdiim yenilikliklerden. Absolute Position ile Parent olarak dive aldrmadan relative verdiiniz dive gre kendini konumlandrp istediiniz gibi at koturun. Tabi birden fazla absolute postion ile veya dikkatsizce atlan admlarda olduka komik duruma da debilirsiniz.

21. Text-Transform
Text-transform ile ieriklerinizi CSS zerinden ynetebilirsiniz.

22. H1I Gizlemek Iin Nagatif Margin Kullanmayn

Googlen web spam tim lideri Matt Cuttsn sylediine gre bu spam olarak alglanmakta. alt tagini kullanmanz semantic olarak kendinizi ifade etmeniz iin yeterli.

23. Validate CSS Ve XHTML

CSS validator ile kodunuzdaki olas hatalar giderebilirsiniz. Ben pek umursamam.

24. Ems Vs. Pixels

Font boyutlarn tanmlarken em veya pixelden hangisini kullacanzn sonucu browserlara gre fark yaratr. Ben pixelcilerdenim. Fakat siz Sizes In Webdesign: Em Vs. Px and why em is better ve Using Points, Pixels, Ems, or Percentages for CSS Fonts makalelerini de inceleyin, kendiniz karar verin.

25. Listelemenin Gc
Listeleme olduka gzel ve gl bir zelliktir. Ayrca semantic olarak da anlam verir. CSS3n salad gzelliklerle nthchild (first,last, 1, 5.. )a zel stil verebilmemiz bence r aan zelliklerden. 1 2 3 4 5 6 < u li d = " n a v " > < l ic l a s s = " c a t i t e mc a t i t e m 2 9 1 "
?

< / l i > < l ic l a s s = " c a t i t e mc a t i t e m 1 8 7 " > < at i t l e = " M e d y a d aR S SK i t a p ' aY e rV e r e n l e r " < / l i > < / u l >

26. Extra Seicilerden Kann

Gerekmedii taktirde parent olan seicinize alt class eklemekten kann. 1 yerine 1 . s o m e c l a s sl i{ . . . }
?

b o d y# c o n t a i n e r. s o m e c l a s su ll i{ . . . . }

eklinde kullanmak daha doru. Bu ekilde css dosyanz maher alan gibi olmaz.

27. Margin Ve Padding

Cross-browser sorununa zm olarak her eye margin ve padding eklemek akllca olacaktr.

*{ m a r g i n : 0 ; p a d d i n g : 0 ; }

28. Object Oriented CSS

OOCSS sayesinde Javascripti unutabilirsiniz. Ksa bir sunum ile adm atabileceiniz OOCSS yeni balayanlar iin zorlayc olabilecektir fakat en azndan teorik bir bilgiyi edinmeniz ilerleyen gnlerde standartlatnzda yabanclnz nleyecektir. Object Oriented CSS

View more presentations from Nicole Sullivan

29. oklu Stiller

Bir CMS sisteminin tipografi veya renk seenekleri olabilir. Ortak alanlar style.csse alp deikenler iin red.css blue.css gibi eitlere ayrabilirsiniz. Bu dosyalarn cachelenmeleri konusunda dikkatli olmay unutmayn.

30. / Kapatn
XHTML validator ile eksiklerinizi farkedin. Boa krek ekmeyin. Not: Umarm anlalr bir makale olmutur. Hatam varsa affola, yorumlarsanz annda dzeltmek iin adm atabiliriz. Unutmadan: Yazy betimleyen thumbnaili tamamen css ile oluturuldu. Teekkrler Jeffrey Way, ayrca makale Nettutsa ve Glen Stansberry ayrca teekkrler. Biraz daha teknik blog yazlarna ynelmek istiyorum, eer blogun gidiat konusunda syleceiniz olursa ltfen ekinmeyin. Teekkrler.