Daca scrii prima ta linie de cod CSS o sa ti se para la inceput destul de ciudat, in special daca ai lucrat cu tabele sau daca nu ai mai lucrat cu alt limbaj de programare.In acest articol o sa va spun 10 trucuri care ti-ar putea face codul mai ordonat, mai lizibil si mai bun, dar cel mai important mai usor de inteles terminand astfel intr-un mod cat mai eficient proiectul tau.
1.Utilizeaza o fila CSS Reset
Cu timpul ai sa observi ca in multe din proiectele tale elementele se vor repeta, CSS-ul nu nu facand exceptie.Ai sa vezi ca unele parti din cod se vor repeta iar si iar asa ca este bine sa ai la indemana un CSS Reset, o fila ce contine un cod de baza.Filele de genul acesta te asigura ca site-ul tau se vede la fel in toate browserele.Si cu site-uri ca a lui Eric Meyer de ce sa nu le utilizezi.
2.Aliniaza-ti stilurile CSS pentru o scanare mai usoara
Cand ai vreo 500 de linii de cod CSS devine chiar obositor pentru ochii tai sa vada ceva de genul:
.classname {
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}
Alinianduti-le poti scana codul mai usor si poti gasi mai usor selectorul sau div-ul cu pricina.
.classname {
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}
3.Comentariile sunt cel mai bun prieten
In spiritul tinerii codului tau CSS ordonat si usor de citit, comentariile vor fi un mod grozav pentru a tine lucrurile mai structurate si mai ordonate.Comentand anumite portiuni de cod scanarea acestuia va fi de 10 ori mai usoara pe langa faptul ca iti va fi mult mai usor sa gasesti ceva.Cine stie?Poate dupa vreo saptamana nu iti mai aduci aminte unde erau toate asa ca pierzi timp pretios cautand dupa stilul unui anumit element.Poti utiliza comentariile pentru a separa sectiuni importante din cod ca antetul, sidebarul, continutul sau footer-ul.
/********** ANTETUL vine aici **********/
Facand asta vei economisi o groaza de timp gasind mult mai rapid elementele cautate, dar va fi si in ajutorul clientului acesta putand modifica mai usor un anumit element, decat sa iti trimita vreun email de vreo 4-5 ori pe saptamana pentru o treaba simpla de 1-2 minute.Beneficiile unui cod CSS ordonat sunt mai extinse decat ai putea crede.Asa ca incerca sa-l faci cat mai ordonat!
4.O singura comanda=osingura linie…mai multe comenzi=mai multe linii
Daca respecti scurta regula de mai sus ai putea reduce marimea filelor CSS drastic.Unii oameni tind sa scrie totul pe o linie, dar ai sa vezi ca in unele proiecte dimensiuni stilurilor la un element va fi mult pre mare.De asemenea am incalca regula 3, asa ca eu sugerez un lucru simplu…daca ai o singura comanda atunci ai o singura linie…daca ai mai multe comenzi atunci ai mai multe linii.Sper ca exemplul de mai jos sa fie relevant.
.classname { border: 0; }
.classname {
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}
5.Creaza-ti tipare
Cel mai bine este sa codezi cum iti place, cu conditia ca si ceilalti sa inteleaga.Daca ai observat, micile bucati de cod ce le-am scris in articol sunt destul de asemanatoare, urmeaza un anumit tipar.E ca la unele poezii, unde forma este deosebit de importanta.Nimeni nu te va obliga sa codezi intr-un anumit mod sau diferit de la proiect la proiect.Totusi incearca sa iti creezi niste tipare cat mai bune, fiindca la final nu numai tu vei avea de castigat.
6. Separeaza-ti hack-urile si filele CSS conditionale
Separeaza hack-urile si CSS-ul conditional de fisierul „mama” in sine.Unii useri ar spune…”Daca el nu isi upgradeaza browserul atunci eu ce sa fac?” – dar raspunsul practic este ca multi nu isi vor schimba ceva la browser, asa ca ei nu se vor putea bucura de intreaga frumusete a website-ului.Asa ca in unele cazuri va trebui sa codezi numai pentru anumite browsere(in special IE) pentru ca site-ul sa ofera acelasi design si nu numai pe o varietate larga de browsere.Asa ca hack-urile si CSS-ul conditional vor deveni o rutina in proiectele tale.Dar personal, in special la un proiect amplu v-as sugera sa separati aceste stiluri de fila style.css principala fiindca v-ar fi mai usor sa faceti numai anumite modificari pentru anumite browsere decat sa gresiti, stergeti sau sa editati ceva nedorit.
Exemplul de mai jso va arata cum ati putea separa fila destinata numai browserului IE8 de cea principala.
<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen"/>
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" mce_href="/css/ie.css" media="screen" />
<![endif]-->
7.Invata si foloseste codul prescurtat
CSS-ul prescurcat te va scuti de o groaza de timp, vei putea reduce marimea fisierului CSS si vei putea gasi totul intr-un mod mult mai usor decat in mod normal.Atunci ma intreb de ce inca multi utilizeaza ceva de genu?!
.classname {
margin-left: 1px;
margin-right: 2px;
margin-bottom: 4px;
margin-top: 1px;
}
Cand pot utiliza exemplul de mai jos ce are aceleasi efect ca cel de deasupra!
.classname { margin: 1px 2px 4px 1px; }
Ca sa intelegi…marginea merge in felul urmator – prima oara pentru top, apoi right, apoi bottom si in final left.Mai pe scurt merge de la top la left in sensul acelor de ceasornic.
8.Utilizeaza cuprinsuri
Da o sa ti sa para ciudat, dar la o fila ce are 500-1000 de linii de cod CSS este ceva obligatoriu(sau ar trebui sa fie).In modul acesta cineva poate sa gaseasca un element fara a mai trebui sa dea cu scroll-ul prin pagina.Este un mod eficient si profesional, care vine atat in ajutorul tau cat si al clientului.
/*****************************************************
1. HEADER code
2. NAVIGATION code
3. CONTENT code
4. SIDEBAR code
5. FOOTER code
*****************************************************/
9.Tine-ti clasele si id-urile usor de memorat
Atat clasele cat si id-urile unor elemente trebui sa fie foarte usor de retinut, fiindca la un proiect mai amplu o sa o multime.
unelementdepelinia20{ ... }
unelementdelangasidebar{ ... }
continutnumaiparagrafe{ ... }
Chiar daca exemplele de mai sus sunt cam fortate iti pot da o idee despre ce inseamna o numire proasta a elementelor.In primul rand daca sunt lungi vor fi greu de memorat, iar daca nu sunt in concordanta cu stilurile unui anumit element atunci sunt si mai confuze.Asa ca este bine sa tii totul cat mai scurt si mai logic…sa fie in antiteza cu am zis adineaori.
.sidebar-title { ... }
.postwrap { ... }
.main-navigation { ... }
10.Alfabetizeaza codul
Poate nu este chiar asa de important, dar daca iti intiparesti treaba asta in minte o sa ai un avantaj enorm.Daca codul tau este alfabetizat, cautarea unui anumite comenzi este floare la ureche.Este un mod prin care arati clientilor de profesionalismul cu care lucrezi asa ca de ce sa nu faco acest lucru.Uita-te in exemplul de mai jos in care o sa vezi o bucata de cod alfabetizat.Cauti de exemplu dupa font-family sau font-size…pai cred ca stii unde este litera F in alfabet.Ai sa vezi pe parcurs cat de usor este sa gasesti anumite lucruri, asa ca de ce nu!
.classname {
border: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin: 48px;
padding: 0;
position: relative;
z-index: 101;
}
Ceva sfaturi pentru ceilalti…
Daca ai ceva sfaturi nu uita sa le impartasesti…spune-mi cum lucrezi, cum iti place sa abordezi un cod pentru a vedea si alte moduri de a coda aceleasi lucru.