İçerik
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="tr-TR"> <head> <link rel="stylesheet" href="amad.css" type="text/css" /> <style type="text/css"> .box { border: 1px #999 solid; font-weight: bold; font-size: 12px; width: 40% } </style> </head> <body> <div> <div class="fltl box"> 1. kutu font-size: 12px; font-weight: bold; </div> <div class="fltr box fs16 fwn"> kutu 2 font-size: 16px; font-weight: normal; </div> <div class="clearfix"> </div> </div> </body> </html> |
…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-)