CSS – Top 10 sfaturi

1.Creati solutii independente

Dezvoltati efectele 3D, rollover-urile bazate pe css in afara proiectului la care lucrati astfel incat sa creati solutii de sine statatoare care pot fi folosite in proiecte ulterioare. Daca mentineti experimentarea neinfluentata de factori externi, veti obtine un cod mult mai usor de depanat atunci cand ceva nu functioneaza asa cum va asteptati.

2.Ordinea adecvata

Toti stiu ca este dificil sa depanezi un cod CSS ingramadit pe un singur rand. Folositi intotdeauna cod CSS pe mai multe randuri, avand declaratiile ordonate in functie de relevanta. Codul poate fi parcurs rapid atat de dumneavoastra, cat si de oricine altcineva lucreaza la proiect.

3.Cunoasteti rolurile

Pastrati clasele specializate la rolul pe care il au. Folositi principul responsabilitatii unice, in care fiecare clasa ar trebui sa aiba o singura responsabilitate, care este inclusa in intregime in cadrul acelei clase. Pastrati toate atributele strict in acel rol in loc sa incercati sa va asumati responsabilitati multiple.

4.Denumire

Folositi selectori scrisi cu litera mica si despartiti prin cratima in cadrul denumirilor. De exemplu, this-is-good{}, this-is-bad{}, thisisreallybad{}. Acestea va ajuta sa pastrati lizibile numele selectorilor si, mai mult ca sigur, este mai simplu de realizat, deoarece un nume cu mai mult de doua cratime pare o prostie.

5.Prefixe

Prefixele de producator vor disparea intr-un final pe masura ce fiecare browser adopta standardele. Insa, pentru monent, asigurati-va ca folositi toate prefixele acolo unde este cazul. Incheiati intotdeauna cu declaratia specifica fara prefix de producator. In ultimul rand, scrieti codul css cu prefixe de producator astfel incat cele doua puncte ale fiecarei declaratii sa se alinieze, iar atributele sa iasa in evidenta dintr-o privire rapida.

6.Pastrati curatenia

Folosirea marginilor negative, a proprietatii overflow:hidden; sau a altor trucuri pentru mascarea capriciilor layoutului ar trebui evitata cu orice pret.

Solutiile temporare precum acestea devin ulterior probleme mai serioase cand sunteti sub presiunea termenului strans de predare. Fie extrageti componenta intr-o pagina curata fara a o repara, fie va intoarceti si stergeti codul CSS din jurul zonei respective pana cand problema dispare si stiti incotro sa va indreptati atentia.

7.requestAnimationFrame

Daca folositi java script pentru a crea animatii care utilizeaza atribute 3D cu prefixe, experimentati folosind requestAnimationFrame in loc de setInterval si settimeout. Desi inca este in curs de dezvoltare si atributul nu este suportat de toate browserele, avantajele sunt reprezentate de faptul ca browserul poate optimiza animatiile simultane intr-un singur ciclu, ceea ce inseamna ca animatiile vor fi mai fluente, iar utilizarea procesorului, a placii grafice si a memoriei va fi mai scazuta.

8.Animatii

Atunci cand creati animatii in CSS, nu uitati sa experimentati cu proprietatea animation-direction. Aceasta va face ca animatiile sa se comporte mai mlt ca tranzitii la trecerea cursorului astfel incat vor porni in directia inversa atunci cand cursorul iese din conturul lor in loc sa revina instantaneu la inceputul animatiei.

9.<img> alt text

Tagul <img> are nevoia de un text alternativ entru a putea fi valid, cat si pentru a respecta principiile accesibilitatii. Daca imaginea este pentru un marcator de lista sau alte pictograme banale, este recomandat sa lasati pur si simplu atributul alt gol, dar sa fie prezent. Un screenreader il va ignora, in loc sa fie nevoit sa citeasca “bullet” de 20 de ori.

10.Alegerea ecranului

Puteti obtine rapid un site care sa arate bine pe dispozitive mobile daca ajustati setarile viewport din tagurile meta si folositi interogarile despre mediul de afisare din CSS. Prin intermediul valorilor adecvate min-width si max-width si al catorva ajustari pentru clasele existente in repsectivele zone din codul CSS, puteti organiza, redimensiona si micsora cu usurinta site-ul pentru a obtine o experienta cu adevarat mobila.

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>