Sa trecem direct la subiect, timpul nu asteapta pe nimeni.
1.Organizare
La fel ca in orice altceva, merita sa fii organizat(a). In loc sa arunci cu id-uri si clase aiurea cum iti vin in minte incearca sa folosesti o structura coerenta. Ea te va ajuta sa fii constient(a) de modelul „in cascada” a foii de stil si sa profiti de „style inheritance” sau stilul de mostenire a acesteia.
Declara elementele cele mai generice la inceput, urmate de cele mai putin generice. Acest lucru permite foii de stil sa mosteneasca atributele corect si pe viitor va fi mult mai usor si rapid de modificat un anumit stil.
Foloseste o structura care ti se potriveste tinand cont de modificari viitoare ce pot aparea si de alti programatori ce vor lucra cu foaia de stil:
- Resetari globale si suprascrieri
- Legaturi si font-uri
- Layout-ul principal
- Layout-uri secundare
- Elemente de formular
- Diverse
2.Intotdeauna incepe cu o resetare globala
Fiecare browser are implicit, un stil considerabil diferit pentru majoritatea elementelor HTML, adica un stil pe care il aplica elementelor HTML automat (vorbim de valori diferite pentru atribute de tipul: padding, margin, border, font-family, text-decoration, font-weight, outline, etc). Este total aiurea stiu, dar solutia este urmatoarea – incepi stylesheet-ul cu o resetare globala pentru toate elementele HTML, ca in exemplul de mai jos:
html, body, a, div, table, tr, td, th, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead
{
margin:0;
padding:0;
border:0;
text-decoration:none;
vertical-align:baseline;
font-weight:normal;
-webkit-font-smoothing: antialiased;
line-height:normal; outline:0 none
}
body:{ line-height:1}
E doar un exemplu, nu este complet si nu include elemente de HTML5, dar este un inceput. Daca descoperi un element nou ce are nevoie de reset doar il adaugi in lista.
3.Foloseste nume utile
Unul dintre avantajele principale in CSS este abilitatea de a separa stilurile de continut. Poti sa faci redesign complet la un site doar modificand CSS-ul, fara sa te atingi de HTML. Asa ca nu iti bate joc de CSS folosind nume sau denumiri care te limiteaza. Foloseste conventii de nume mai versatile si pastreaza o consistenta. Nu folosi stiluri specifice. O clasa in genul .link-blue este foarte probabil sa iti incurce foaia de stil pe viitor cand clientul va cere sa schimbi acele link-uri pe culoarea oranj.
Numeste elementele in baza a ceea ce sunt, nu dupa cum arata. De exemplu, .comment-blue este mai putin versatil decat .comment-beta, si .post-bigfont limiteaza mai mult decat .post-title. De asemenea foloseste cratime „-” in loc de underscore „_”, browser-ele mai vechi nu se inteleg prea bine cu underscore in CSS sau nu le suporta deloc. Pentru o compatibilitate mai buna fa-ti un obicei din a folosi cratime in loc de underscore. Foloseste #col-alpha in loc de #col_alpha. Punctul si virgula dintre atributele unei declaratii sunt necesare pentru a separa atributele, insa sunt optionale cand ai doar un singur atribut, Ex: .font-jmecker {font-size:20px}. Din experienta mea si a altor programatori CSS pot sa spun ca punctul si virgula este optional si pentru ultimul atribut din mai multe ale unei declaratii, insa nu am testat acest lucru pe toate versiunile de browser-e disponibile pe toate platformele existente, pot sa confirm doar pe cele mai populare browser-e incepand de acum 4-5 ani pana in prezent (Firefox, Opera, Internet Explorer, Chrome si Safari).
4.Nu te repeta
Re-foloseste declaratii sau atribute de fiecare data cand ai posibilitatea, grupand elementele in loc sa declari stilurile din nou pentru fiecare. De exemplu, daca h1 si h2 au aceeasi culoare sau marime de font grupeaza-le folosind virgula pentru a le separa.
exemplul urmator:
h1, h2 {
margin: 4px
font-size:16px;
color:red;
}
mult mai eficient decat:
h1 {
margin: 4px
font-size:16px;
color:red;
}
h2 {
margin: 4px
font-size:16px;
color:red;
}
Gandeste-te mereu la posibilitatea de a grupa elementele si de a folosi prescurtari pentru declaratii.
poti face asta:
h1 {
margin-top:5px;
margin-right:0px;
margin-bottom:10em;
margin-left:0px;
}
cu doar:
h1 {margin:5px 0 10em 0}
sau:
h1 {
margin-top:20px;
margin-right:0px;
margin-bottom:20px;
margin-left:0px;
}
cu doar:
h1 {margin:20px 0}
Cand o valoare este 0 pentru orice atribut nu mai este nevoie sa specifici unitatea de masura. Este foarte important sa intelegi ordinea in care aceste prescurtari se interpreteaza in CSS. Sus, Dreapta, Jos, Stanga – Un sens ceasornic care incepe cu ora 12. De asemenea daca atributele Sus si Jos sau Stanga si Dreapta sunt la fel nu e nevoie sa folosesti decat 2, ca in exemplul 2 de mai sus.
Alt exemplu:
poti face asta:
#header {
background-image: url(img/header.jpg);
background-repeat: no-repeat;
background position: top center
}
cu doar:
#header { background:url (img/header.jpg) no-repeat top center}
5.Esti pe calea cea buna?
Putini programatori se folosesc cu adevarat de puterea ce le-a fost incredintata de catre CSS cand vine vorba de modul de referire la elementele HTML. Modul prin care declari un stil pentru un anumit element poate fi realizat fara a specifica o clasa sau un id pe acel element. Daca ai un div cu id-ul #menu si vrei sa schimbi atributele tuturor legaturilor din acel div (sa zicem ca vreau sa setez o margine de 10 pixeli la stanga pe fiecare legatura) poti folosi urmatoarea declaratie:
#menu a {margin-left:10px}
Chiar daca legatura se afla intr-un ul (unordered list) sau orice alt element, declaratia facuta se refera la absolut toate legaturile din acel div. Aceasta metoda ne scuteste de ceva cod HTML si CSS, dar nu poate fi folosita atunci cand ai nevoie de stiluri diferite pentru anumite elemente de acelasi tip.
6.Scrie pentru Gecko, apoi ajusteaza pentru Webkit, IE si Presto
Nu sunt persoane, sunt layout engines (ceea ce folosesc browser-ele ca sa afiseze paginile).
Scuteste-te de multa bataie de cap, scrie CSS-ul mai intai pentru browser-ele care folosesc Gecko (Firefox, Mozilla, Netscape, Flock, Camino). Daca CSS-ul tau functioneaza corect pentru Gecko este mult mai probabil sa nu aibe probleme pentru Webkit (Safari, Chrome), Internet Explorer si Presto (Opera).
7.Nu folosi hacks
Un programator CSS bun stie ca nu are nevoie de hacks decat in cazuri foarte rare. In majoritatea cazurilor este suficient sa creezi o foaie de stil separata pentru browser-ul care iti face probleme, nu este nevoie de JavaScript sau alte tehnologii pentru a repara 99% din incompatibilitati.
Motorul Triton (Internet Explorer) are o functie interesanta care iti permite sa folosesti HTML special pentru o anumita versiune de IE, astfel poti incarca o foaie de stil facuta pentru aceste browsere.
Este nevoie doar de unul sau mai multe din urmatoarele comment-uri conditionale in <header></header>
<!–[if IE]>
Target all versions of IE
<![endif]–>
<!–[if lte IE 7]>
Target all versions of IE that are less than or equal to “7″
<![endif]–>
<!–[if IE 6]>
Target IE 6
<![endif]–>
Iata si un exemplu mai practic:
<!–[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]–>
<!–[if !IE]><!–>
<p>You are not using Internet Explorer.</p>
<!–<![endif]–>
8.Validare
Foloseste validatorul CSS gratuit al W3C. Daca te-ai blocat si layout-ul tau nu face ce vrei sa faca, validatorul CSS te va ajuta sa descoperi erorile. De cele mai multe ori ai uitat sa pui un punct si virgula undeva sau ai un conflict de id-uri.
9.Ceva special si curat
Separa CSS-ul special pentru un anumit browser in alta foaie de stil si include-o in functie de nevoie prin JavaScript, cod pe parte de server sau comentarii conditionale. Foloseste aceasta metoda pentru a evita hack-uri de CSS murdare in foile de stil principale. Acest lucru iti va mentine baza CSS-ului tau curata si usor de administrat.
10.Testing, testing…
Testeaza-ti codul in browser-ele necesare, este foarte posibil sa existe diferente intre interpretarile browser-elor, astfel anumite elemente nu vor fi afisate la fel. Aici cauzele sunt diverse, din nefericire nu pot decat sa te sfatuiesc sa apelezi la prietenul nostru Google.
Daca descoperi ca lipseste ceva din lista contribuie si tu, lasa un comentariu.
