Exista multe metode pentru a-ti structura CSS-ul. Acest articol incearca sa descrie metoda pe care o folosesc eu. Eu o numesc “metoda arborescenta”, deoarece structrureaza CSS-ul… exact, ca si o structura de arbore. Vreau sa subliniez ca nu este inventia mea, eu doar o descriu si argumentez regulile.

Oricine care a construit un site mai mare sigur s-a confruntat cu situatia in care CSS-ul devine in scurt timp un haos. Clase si id-uri peste tot prin fisier, si ca sa localizezi o anumita clasa esti nevoit sa folosesti functia de cautare pe care ti-o ofera editorul. Pe de alta parte, din CSS in HTML e si mai dificil, nici macar nu sti in ce fisier este definita o anumita clasa. E o mizerie totala.

Metoda arborescenta incearca sa structureze CSS-ul in blocuri logice, blocuri luate din HTML. De asemenea se doreste sa fie usor de inteles pentru oricine. Fara coduri secrete sau scheme de ordonare complicate.

Ordoneaza-ti selectorii ca si in HTML

Una din problemele care apar la maparea dintre HTML si CSS este ca deobicei difera ca si structura. HTML-ul este (daca esti norocos) structurat convenabil ca un arbore semantic pe cand CSS-ul de multe ori este ordonat dupa ceva aleatoriu, de exemplu fonturi, culoare sau pozitionare.

Pentu a face tranzitia dintre cele doua lumi cat mai usoara, vrem sa le facem cat mai asemanatoare posibil. Este HTML-ul impartit in header, continut si footer? Atunci sa ne asiguram ca si CSS-ul sa foloseasca cele trei parti majore. Ai pus navigarea deaspra header-ului in HTML? Atunci aranjeaza si CSS-ul la fel! Orice alta structura ingreuneaza trecerea de la HTML la CSS. E posibil sa gasesti toate manipularile ce tin de fonturi intr-o singura parte a CSS-ului, dar doar daca sti ca acest developer foloseste schema respective pentru ordonare.

Iata un exemplu simplu in care doar am ordonat selectorii:

#header { ... }
h1 { ... }
h2 { ... }
#content { ... }
p { ... }
em { ... }
strong { ... }

Cand grupam mai multe stiluri intr-o singura definitie, eu pun grupul deasupra tuturor stilurilor individuale. Asa ca #header, #content vine inaintea ambelor #header si #content.

Intotdeauna foloseste “intreaga cale” catre element

Ce am discutat mai sus este, in mare, usor de inteles, dar un developer experimentat stie ca foarte putine situri sunt atat de simple. De multe ori iti doresti o metoda prin care sa definesti diferite stiluri in parti diferite ale paginii. Sa presupunem ca vrei link-uri verzi in navigare dar vrei sa le pastrezi albastre in rest.

Pentru a obtine asta folosim sub selectori. Selectorul #navigation a iti ofera un look nou link-urilor din navigare. Sa dezvoltam putin lucrurile. De ce sa nu folosim intotdeauna intreaga cale catre elemente? De ce sa nu folosim #navigation ul li a in loc? Facand acest lucru, oferim developer-ului, care se uita peste codul nostru, o multime de informatii despre cum HTML-ul si CSS-ul apartin impreuna.

Sa adaugam la exemplul nostru precedent:

#header { ... }
#header h1 { ... }
#header h2 { ... }
#content { ... }
#content p { ... }
#content p em { ... }
#content p strong { ... }

Acest lucru nu schimba cu nimic semnificatia de mai devreme. Inainte am selectat toate titlurile (headers) de nivel doi; acum selectam titlurile din interiorul diviziei de titluri. Prelungind fiecare selector cu o “cale” a facut ca regulile CSS-ului nostru sa fie mai precise, iar precis inseamna mai mult control pentru tine.

Cu asta am redus si numarul de id-uri si clase noi; doar specifica o cale catre un element in loc sa adaugi o clasa pentru el. Nu adauga clase sau id-uri noi doar daca este intradevar nevoie.

Ne-a mai ramas problema “stilurilor generale”; stiluri pe care vrem sa le aplicam elementelor in locuri diferite din arbore. Deoarece ele trebuie aplicate tuturor elementelor, nu se potrivesc in structura arborescenta pe care am construit-o pana acum. In schimb creem o sectiune la inceputul fisierului (sau un fisier separat) cu doar aceste “stiluri generale”. Nu aplica reguli in aceasta sectiune daca le folosesti doar odata in document, codul trebuie sa fie pe cat posibil sub structura arborescenta.

Foloseste indent cu cap

Pentru a realize un cod mai usor de inteles, eu intotdeauna adaug indentation (pentru cei ce nu cunosc termenul: inseamna spatierea inaintea blocului de text). Spatierea face ca structura de arbore pe care incercam sa o construim sa fie si mai clara, poti cu usurinta sa gasesti sectiunile principale si sa le urmaresti de acolo in jos.

Sa adaugam indent si la exemplul nostru:

#header { ... }
   #header h1 { ... }
   #header h2 { ... }
#content { ... }
   #content p { ... }
      #content p em { ... }
      #content p strong { ... }

Nu exagera cu spatierea. Daca style-uesti tabele si folosesti thead in markup poti sa renunti la spatierea nivelului respectiv. Spatierea dubla de dragul spatierii este doar risipa de spatiu.

Cazuri speciale: Template-uri

De asemenea avem nevoie sa facem reguli care apar doar pe unele din paginile noastre. Poate vrem ca home page sa arate cumva diferit fata de restul paginilor? Rezolvam problema atribuind un id sau clasa elementului body. Astfel am posibilitatea sa specific stilurile doar pentru o pagina anume, si stabilind un id sau clasa pentru body imi permite sa schimb orice in acel document.

Aceste stiluri specifice au nevoie de un loc in structura noastra. Aici am tendinta sa ma abat de la regula si sa le grupez impreuna cu stilurile care le schimba. Prin urmare body#page_home #header h1 este cu o treapta sub #header h1 in structura. Astfel poti vedea cu usurinta toate stilurile pentru un element anume, in loc sa scroll-ui sus jos (cum se intampla de obicei cand nu-ti aduci minte de stilurile generale). Pastreaza template-urile impreuna cu stilurile pe care le modifica si nu separat.

Daca-ti doresti schimbari majore, poate un look complet diferit pe anumite pagini, nu este nevoie sa grupezi lucrurile conform schemei precedente. Muta totul in fisiere separate.

Fiecare decalratie pe rand ropriu

Indent-ul combinat cu calea intreaga face ca unele randuri sa devina destul de lungi. Asta inseamna ca punand toate decalratile pe un singur rand te obliga sa folosesti scroll orizontal, ceva ce evitam deja pe siturile noastre. Cea mai simpla metoda pentru a preveni scroll-ul orizontal este sa folosim cate un rand pentru fiecare decalratie.

… in ordine alfabetica

Gruparea proprietatilor este alta problema. Am vazut scheme de grupare bazate pe tot felul de chestii; de la impartiri dupa “pozitionare”, culoare si fonturi, pana la aranjarea lor complet aleatoare. Eu am ales sa le ordonez pur si simplu alfabetic. Este una din putinele metode care aduce cat de cat ordine si totusi ramane suficient de simpla. Am vazut incepatori care fac acest lucru singuri; ceea ce cred eu ca este un argument bun pentru aceasta metoda, e intuitiva.

Un exemplu simplu pentru a ilustra:

#content {
  color    : Blue;
  font     : 3.4em Arial, sans-serif;
  margin   : 0.5em;
}

O nemultumire pe care am auzit-o referitor la aceasta metoda e ca imparte lucrurile care apartin impreuna. Oamenii tind sa pastreze position: absolute si left: 0 impreuna, doar un exemplu de astfel de imperechieri. Si pe mine m-a deranjat la inceput, dar un bloc de decalratii rareori contine mai mult de 10 decalratii, iar ordinea alfabetica totusi face posibila gasirea lor cu usurinta.

Asta e! Urmand cateva reguli simple poti obtine un fisier CSS care este mai usor de parcurs, un fisier care poti sa-l predai mai departe cu mandrie. As putea sa-l laud o zi intreaga, dar cel mai bine e sa decideti voi daca functioneaza sau nu. De ce nu incercati sa-l folositi in urmatorul vostru proiect?

autor: Emil Stenström pe 10 Martie, 2007
sursa: http://friendlybit.com/css/how-to-structure-large-css-files/

  • Reddit
  • StumbleUpon
  • del.icio.us
  • Digg
  • Twitter