Cele mai bune practici CSS

Fisierul CSS este o parte importanta a intregului proiect deoarece poate adauga un plus de clasa si profesionalism la fel de usor cum poate sa strice impresia generala a utilizatorului. Iata cateva lucruri simple care pot imbunatati considerabil calitatea CSS-ului site-ului tau web:

1. Incercati sa organizati selectorii intr-o structura descendenta similara celei HTML. Va fi mult mai usor de citit fisierul in viitor daca elementele se gasesc acolo unde este evident ca ar trebui cautate. In plus nici nu prea are sens sa gasesti regulile definite pentru footer la inceputul fisierului. Un exemplu bun de organizare de acest fel este urmatorul:

  • clase generice (body, h1, h2, a, p, etc.)
  • header
  • navigare
  • continut
  • footer

2. De foarte multe ori mai multe elemente folosesc aceleasi atribute si sunt definite independent unele de altele. Este foarte util sa inlantuiti aceste elemente si sa definiti o serie de atribute comune:

h1, h2, h3{font-family:Arial; color:blue; padding:0 5px;}

3. Veti descoperi ca o metoda foarte buna de a salva timp de dezvoltare este sa scrieti mai intai partea de HTML. Desi pare mai logic sa dezvoltati si partea de CSS in paralel cu cea de HTML, de fapt este mult mai usor si rapid sa le faceti pe rand.

4. Nu ezitati sa folositi clase CSS multiple, in fond ii spune cascading style sheet, nu?

5. Pentru fiecare element incercati sa grupati atributele pe o singura linie. In felul acesta veti obtine un fisier mult mai usor de citit si prin urmare mai usor de modificat in viitor.

.element{background:blue; color:black; font-size:14em; border: 1px solid green;}

Folosind formatul de mai sus in loc de cel de mai jos obtineti un cod mult mai bine structurat:

.element{
background:blue;
color:black;
font-size:14em;
border:1px solid green;
}

6. Adaugati comentarii pentru a delimita sectiunile si pentru a sublinia elementele mai avansate folosite:

/*Incepe sectiunea din partea stanga*/
styles...
/*Sfarsit sectiune partea stanga*/

7. Folositi clase generice pentru a nu adauga acelasi atribut la fiecare element pentru care este necesar. Clasele generice folosite impreuna cu adaugarea de clase multiple in HTML poate salva foarte mult timp pentru designul site-ului web.

.stanga{float:left;}
.dreapta{float:right;}

8. Incercati sa evitati folosirea mai multor selectori decat sunt necesari. In loc de:

body #meniu .cevaClasa ul li {....}

puteti folosi:

.cevaClasa ul li {....}

9. Incercati sa scrieti cod CSS care poate fi interpretat foarte bine de toate browserele. Este mult mai bine decat sa folositi hack-uri care functioneaza doar pentru un anumit browser.

Atat pentru astazi, voi reveni in curand cu o continuare a seriei de CSS. 

Daniel I.

0Comentarii la "Cele mai bune practici CSS"

Adauga Comentariu

Mesaj

Trimite