10 secrete ale CSS (Cascading Style Sheet)

CSS - Cascading Style Sheet icon

1. Organizare

În general în domeniul dezvoltării web, merită sa fii organizat(ă). În loc să arunci cu id-uri și clase aiurea cum îți vin în minte încearcă să folosești o structură coerentă. Ea te va ajuta să fii conștient(ă) de modelul “în cascadă” a foii de stil și să profiți de “style inheritance” sau succesiunea de stil.
Declară elementele cele mai generice la început, urmate de cele mai puțin generice. Acest lucru permite o succesiune corectă a atributelor stilurilor și pe viitor va fi mult mai ușoară și rapidă modificarea oricărui stil.
Folosește o structură care ți se potrivește, având în vedere modificări viitoare ce pot apărea, ușurează-le puțin viața celor care vor lucra vreodată cu foaia ta de stil:
Structura poate să arate similar cu următorul exemplu:

• Resetări globale și suprascrieri
• Legături și font-uri
• Layout-ul principal
• Layout-uri secundare
• Elemente de formular
• Diverse

2. Întotdeauna începe cu o resetare globală

Fiecare browser interpretează diferit majoritatea elementelor HTML, vorbim de valori diferite pentru atribute de tipul: padding, margin, border, font-family, text-decoration, font-weight, outline, etc. Este total aiurea știu, dar soluția este următoarea – începi stylesheet-ul cu o resetare globală pentru toate elementele HTML, ca în 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;
line-height:normal;
outline:0 none
}
body:{ line-height:1}

E doar un exemplu de bază, nu este complet și nu include elemente de HTML5, dar este un început.

3. Folosește nume utile

Unul dintre avantajele principale în CSS este abilitatea de a separa stilurile de conținut. Poți să faci redesign complet la un site doar modificând CSS-ul, fără să te atingi de HTML.
Nu folosi nume sau denumiri care te limitează. Folosește convenții de nume mai versatile și păstrează o consistență.
Nu folosi stiluri specifice. O clasă în genul .link-blue este foarte probabil să te încurce pe viitor când clientul va cere să schimbi niște link-uri pe culoarea oranj.
Numește elementele după ceea ce sunt, nu după cum arată. De exemplu, .comment-blue este mai puțin versatil decât .comment-articol, și .post-font-mare limitează mai mult decât .post-titlu.
Folosește cratime “-” în loc de underscore “_”, browser-ele mai vechi nu se înțeleg prea bine cu underscore în CSS sau nu le suportă deloc. Pentru o compatibilitate mai bună fă-ți un obicei din a folosi cratime în loc de underscore. Folosește #col-alpha în loc de #col_alpha.
Punctul și virgula dintre atributele unei declarații sunt necesare pentru a separa atributele, însă sunt opționale când ai doar un singur atribut, Ex: .font-smecker {font-size:20px}. Punctul și virgula este opțional și pentru ultimul atribut din mai multe ale unei declarații, însa nu am testat acest lucru pe toate versiunile de browser-e disponibile pe toate platformele existente, doar cele mai populare browser-e, versiuni începând de acum 4-5 ani până în prezent (Firefox, Opera, Internet Explorer, Chrome și Safari).

4. Nu te repeta

Re-folosește declarații sau atribute de fiecare dată când ai posibilitatea, grupând elementele în loc să declari stilurile din nou pentru fiecare. De exemplu, dacă h1 și h2 au aceeași culoare sau mărime de font grupează-le folosind virgula pentru a le separa.

h1, h2 {
margin: 4px
font-size:16px;
color:red;
}

mult mai eficient decât:

h1 {
margin: 4px
font-size:16px;
color:red;
}

h2 {
margin: 4px
font-size:16px;
color:red;
}

Gândește-te mereu la posibilitatea de a grupa elementele și de a folosi prescurtari pentru declarații.
poți face:

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}

Când o valoare este 0 pentru orice atribut nu mai este nevoie să specifici unitatea de măsură. Este foarte important să înțelegi ordinea în care aceste prescurtări se interpretează în CSS: Sus, Dreapta, Jos, Stânga – Un sens ceasornic care începe cu ora 12. De asemenea dacă atributele Sus și Jos sau Stânga și Dreapta sunt la fel nu e nevoie să folosești decât 2 din ele, ca în exemplul cu h1 de mai sus.
Alt exemplu, poți face:

#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. Ești pe calea cea bună?

Puțini programatori se folosesc cu adevărat de puterea ce le-a fost încredințată prin CSS, mai ales când vine vorba de modul de referire la elementele HTML. Modul prin care declari un stil pentru un anumit element sau un grup de elemente poate fi realizat fără a specifica o clasă sau un id pe acel element în HTML. Dacă ai un div cu id-ul #menu și vrei să schimbi atributele tuturor legăturilor din acel div (să zicem că vreau să setez o margine de 10 pixeli la stânga pe fiecare legătură) poți folosi următoarea declarație:

#menu a {margin-left:10px}

Chiar dacă legătura se află într-un ul (unordered list) sau orice alt element, declarația făcută se referă la absolut toate legăturile din acel div. Această metodă ne scutește de ceva cod HTML și CSS, dar trebuie folosită cu grijă atunci când ai nevoie de stiluri diferite pentru anumite elemente de același tip în container-ul respectiv.

6. Scrie pentru Gecko, apoi ajustează pentru Webkit, IE și Presto

Nu, nu sunt nume de persoane :) , sunt layout engines (ceea ce folosesc browser-ele ca să afișeze paginile).
Scutește-te de multă bătaie de cap, scrie CSS-ul mai întai pentru browser-ele care folosesc Gecko (Firefox, Mozilla, Netscape, Flock, Camino). Dacă CSS-ul tău funcționează corect pentru Gecko este mult mai probabil să nu aibe probleme pentru Webkit (Safari, Chrome), Internet Explorer și Presto (Opera).

7. Nu folosi hacks

Un programator CSS bun știe că nu are nevoie de hacks decât în cazuri foarte rare. În majoritatea cazurilor este suficient să creezi o foaie de stil separată pentru browser-ul care îți face probleme, nu este nevoie de JavaScript sau alte tehnologii pentru a repara 99% din incompatibilități.
Motorul Triton (Internet Explorer) are o funcție interesantă care îți permite să folosești HTML special pentru o anumită versiune de IE, astfel poți încărca o foaie de stil făurită special pentru aceste browsere.
Este nevoie doar de unul sau mai multe din următoarele comment-uri condiționale în <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

Folosește validatorul CSS gratuit al W3C. Dacă te-ai blocat și layout-ul tău nu face ce trebuie să facă, validatorul CSS te va ajuta să descoperi erorile. De cele mai multe ori ai uitat sa pui un punct și virgulă undeva sau ai un conflict de id-uri.

9. Ceva specific și curat

Separă CSS-ul special pentru un anumit browser în altă foaie de stil și include-o în funcție de nevoie prin JavaScript, cod pe parte de server sau (recomandat) – comentarii condiționale. Folosește această metodă pentru a evita hack-uri de CSS murdare în foile de stil principale. Acest lucru îți va menține baza CSS-ului tău curată și ușor de administrat.

10. Testing, testing…

Testează-ți codul în browser-ele principale, este foarte posibil să existe diferențe între interpretările browser-elor, anumite elemente nu vor fi afișate la fel. Aici cauzele sunt diverse, din nefericire nu pot decât să te sfătuiesc să apelezi la prietenul nostru Google.

Cam asta e lista mea de 10 “secrete” ale CSS-ului. Programare ușoară!


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *

*


+ 2 = 3

Poți folosi aceste etichete HTML și atribute: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>