css-shorthand

CSS shorthand este “abrevierea in cascada” pentru acelasi output. Motive ? E mult mai simplu, economicos si la dieta de greutate pe server. Evident un CSS poate sa aiba si 50KB [and that's for bytes nu biti]… nu e mult consum de bandwidth. Asta pentru un site cu 2 vizitatori lunari, dintre care unul e admin-ul iar alalalt mare, negru era ta’su mah. La 1000 de request-uri/minut inseamna deja 48MB. Se impune deci o oarecare optimizare a stilului de lucru. Dincolo de layout-ul in sine al unui fisier CSS [articol care va urma] sunt cateva general guidelines care ar trebui urmate in scrierea oricarei linii.

• se definesc dupa caz intai background-ul si propietatile legate de font;
• se exprima [preferabil in pixeli] dimensiunile de tip width, height, margin si padding.
  Se lasa ultimele intrucat si sunt si cele mai des modificate in caz de crash.
• IE + FF padding-ul se aduna la height si la width
• FF = margin-ul NU se aduna la dimensiunea totala a div-ului
• IE = margin-ul se aduna la W si H
• scrierea pe o LINIE si nu multiline ajuta mult la randarea vizuala mult mai eleganta + shorthands + inheritance mult mai usor identificabila

Un exemplu elocvent privind diferenta enorma intre coding-ul multiline CSS labartat si cel oneline shorthand, atat la nivel vizual [daca se respecta mereu derivarea pe selectori, si ordinea pe declaratiile inerente propietatilor > fluiditate in randare] cat si la nivel de output , care este identic 100% se regaseste mai jos.

/* CSS SHORTHAND */
.css_beginner
{
background-image:url(img.jpg);
background-position:top;
background-position:left;
background-repeat:repeat-x;
background-color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
line-height:20px;
font-weight:bold;
margin-top:0px;
margin-right:10px;
margin-bottom:5px;
margin-left:10px;
padding-top:10px;
padding-right:5px;
padding-bottom:10px;
padding-left:5px;
}

.css_expert { background:url(img.jpg) 0 0 repeat-x black; font:arial 10px/24px bold; margin:0px 10px 5px; padding:10px 5px; }