Cu ajutorul CSS-ului poti sa faci ca site-ul tau sa aiba aspectul pe care il doresti. Astfel este recomandat sa folosesti cat mai multe clase de CSS si sa nu incarci codul HTML cu informatii inutile.
Dar cum poti face un fisier css cat mai simplu?
1. Nu folosi clase generale
Este mai bine sa definesti clase pentru diferite zone decat sa definesti o clasa generala pentru toate acele elemente.
Exemplu gresit:
[css]
*{ margin:0; padding:0; }
[/css]
Exemplu corect:
[css]
html, body, div, dl, dt, dd, ul, h1, h2, h3, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
ul { list-style:none }
[/css]
2. Nu folosi diferite hack-uri pentru IE.
Nu folosi aceste hackuri pentru versiunile inferioare de Ie deoarece vei avea probleme in versiunile mai noi. Cu toate acestea este bine sa folosesti diferite conditii. Exemplu de jos spune ceva de genul: daca esti IE 6 atunci incarca fisierul acesta de css
[css]
<!–[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />
<![endif]–>
[/css]
3. Foloseste nume sugestive pentru clasele de css.
Acest aspect te paote ajuta sa gasesti usor codul css care doresti sa il cauti si nu te vei pierde prin acel cod.
4. Daca ai mai multe clase definite cu acelasi stiluri: combinale!
Nu are sens sa pui mai multe clase cu aceleasi stiluri si sa le scrii separat. Tot ce trebuie sa faci este sa definesti mai multe clase cu acele proprietati.
Gresit:
[css]
h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
[/css]
Corect:
[css]
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
[/css]
5. Foloseste variantele scurte de cod css.
Poti sa scrii un cod css cu multe proprietati in multe randuri. Insa varianta buna este sa folosesti variantele prescurtate ale codului css.
Gresit:
[css]
li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}
[/css]
Corect:
[css]
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}
[/css]