Her yiğidin bir yoğurt yiyişi vardır demişler… Herkesin CSS yazımı ise bir diğer kişiden farklıdır, gerek isimlendirme olsun gerek chaining olsun bir kendine-özgülük söz konusudur… Benimkisi ise garip bi’ şekilde PSD -> HTML/CSS işlerimi kolaylaştırdığını düşündüğüm bir alışkanlık üzerine kuruldu, bu alışkanlık ise short-hand kod yazma zımbırtıları yüzünden oldu 8-)

Olay kısaca; CSS’de sürekli kullandığımız kodları classlar haline getirmek ve her seferinde yeniden yeniden yazmak yerine elementlere, oluşturduğumuz classları atamak. Bu sayede hem daha hızlı CSS yazıyor, hem de daha az boyuta sahip CSS dosyaları elde ediyoruz. Alışırsanız CSS yazma işlemi daha da kolay geliyor, ilk başta tam randımanlı kullanamayabilirsiniz benden söylemesi ;)

Şimdilik tanımlamalar şöyle;

input,select,textarea margin:0
a:link,a:visited text-decoration:none
a:hover text-decoration:none
a img border-width:0
.clearfix clear:both;height:0;font-size:0;line-height:0
.atdu a text-decoration:underline
.atdui a text-decoration:underline!important
.atdn a text-decoration:none
.atdni a text-decoration:none!important
.tdu text-decoration:underline
.tdn text-decoration:none
.tdni text-decoration:none!important
.tal text-align:left
.tac text-align:center
.tar text-align:right
.tali text-align:left!important
.taci text-align:center!important
.tari text-align:right!important
.fltl float:left
.fltr float:right
.fltn float:none
.dib display:inline-block
.db display:block
.dn display:none
.dibi display:inline-block!important
.dbi display:block!important
.dni display:none!important
.nom margin:0
.nomi margin:0!important
.nop padding:0
.nopi padding:0!important
.nobgi background-image:none
.nobgii background-image:none!important
.pa position:absolute
.pr position:relative
.ha height:auto
.hai height:auto!important
.vat,.vat td,td.vat vertical-align:top
.vam,.vam td,td.vam vertical-align:middle
.vab,.vab td,td.vab vertical-align:bottom
.vati,.vati td,td.vati vertical-align:top!important
.vami,.vami td,td.vami vertical-align:middle!important
.vabi,.vabi td,td.vabi vertical-align:bottom!important
.norepeat,.no_repeat background-repeat:no-repeat
.norepeati,.no_repeati background-repeat:no-repeat!important
.repeatx,.repeat_x background-repeat:repeat-x
.repeatxi,.repeat_xi background-repeat:repeat-x!important
.repeaty,.repeat_y background-repeat:repeat-y
.repeatyi,.repeat_yi background-repeat:repeat-y!important
.fwn font-weight:400
.fwni font-weight:400!important
.fwb font-weight:700
.fwbi font-weight:700!important
.fs10 font-size:10px
.fs11 font-size:11px
.fs12 font-size:12px
.fs13 font-size:13px
.fs14 font-size:14px
.fs15 font-size:15px
.fs16 font-size:16px
.fs17 font-size:17px
.fs18 font-size:18px
.fs19 font-size:19px
.fs20 font-size:20px
.fs21 font-size:21px
.fs22 font-size:22px
.fs23 font-size:23px
.fs24 font-size:24px
.fs25 font-size:25px
.fs26 font-size:26px
.cp cursor:pointer
.cpi cursor:pointer!important
.cd cursor:default
.cdi cursor:default!important

 


Basit bir demo

 

 Github üzerinden indirin

…ve son olarak eklenmesi gerektiğini düşündüğünüz veya aklınıza takılan birşeyler varsa söylemekten çekinmeyin ;)

Kolay gelsin 8-)