Sfaturi pentru a scrie un CSS mai bun

iNoob | Stefanescu Mihai | 2020-10-11

CSS este un limbaj ce nu este chiar greu de invatat, dar daca il folosesti pentru un proiect de amploare poate deveni greu de intretinut daca nu folosesti un mod de a scrie pe intelesul tuturor. In acest articol va voi arata cateva moduri de a scrie CSS in asa fel incat sa si intelegeti ceva de acolo mai tarziu.

1. Nu Folosi Reset Global

Folosirea resetului globalpentru a scapa de margin si padding din fisierele HTML este un NU Strict. Nu doar ca este un proces incet si ineficient. In loc de acest reset va recomand un subset precum al lui Eric Meyer.

Nu Asa!

[cc name=”nuasa1″]

Mai bine asa:

[cc name=”maibineasa1″]

2. Nu folosi Hackuri IE

Chiar daca Hackurile CSS sunt folositoare pentru a mentine un look consistent pentru browserele mai vechi precum IE6 pot fi problematice pentru versiunile noi, de exemplu pentru IE8.Ar trebuii sa folosesti declaratii conditionale in loc sa tintesti versiuni specifice de Internet Explorer. De exemplu, folosirea urmatorului cod in <head> va incarca fisierul iestyle.css doar pentru IE6 sau versiune mai veche.

[cc name=”conditionalie6orolder”]

3. Numele pentru Clase si IDuri

(Mai multe informatii!)
Sa presupunem ca trebuie sa iti definesti sidebar-ul cu clasa .leftbox si sa adaugi cateva elemente de design, dar nu ar mai avea niciun sens daca la acest leftbox ii dai float: right, nu? Ar trebuii sa te gandesti putin la denumirea acestor clase si/sau id-uri astfe in cat sa aiba un oarecare inteles.

4. Utilizarea succesiunii CSS

Daca ai mai multe elemente child intr-un element parinte este mai bine sa le definesti cu ajutorul calsei/id-ului parinte si sa lasi succesiune CSSului sa faca toata treaba.In acest mod poti modifica mai tarziu intr-un mod mai usor si veio avea si o dimensiune redusa a fisierului css.

Nu asa!

[cc name=”nuasa2″]

Mai bine asa:

[cc name=”maibineasa2″]

5. Combinarea mai multor  selectori

Poti combina mai multi selectori in unul singur, lucru ce iti va salva timp si spatiu.

Nu asa!

[cc name=”nuasa3″]

Mai bine asa:

[cc name=”maibineasa3″]

6. Foloseste Scurtaturi

Foloseste scurtaturi ale proprietatile pentru a scrie mai usor codul si pentru a reduce dimensiunea fisierului css. Poti folosi scurtaturi pentru margin, padding, border, font, background, s.a.m.d.

Nu asa!

[cc name=”nuasa4″]

Mai bine asa:

[cc name=”maibineasa4″]

7. Organizarea codului CSS

Organizeaza-ti codul CSS intr-un anumit mod (dupa un anumit tipar), pentru a-l face mai usor de citit mai tarziu. Iata un mod simplu de organizare pe care il poti folosi:

[cc name=”modorganizare”]

8. Cod lizibil

CSSul lizibil iti va face viata mai usoara atunci cand va trebuii sa modifici o anumita proprietate mai tarziu. Fie grupezi in functie de selector pe o anumita linie, fie dupa proprietate cu spatiere de riguare. Ba chiar poti combina aceste doua tehnici:

[cc name=”lizibilitateacssului”]

9. Comentarii potrivite

Comentariile pot fi folosite pentru a separa diferite sectiuni ale codului CSS

[cc name=”commflex”]

10. Sortare in ordine alfabetica a proprietatilor

Poate ai impresia ca este un mod complicat de a scrie CSS, dar iti va face viata mai usoara cand vei cauta ceva mai tarziu.

[cc name=”proprietatialfa”]

11. Foloseste Stylesheet Extern

Este mult mai bine sa folosesti stylesheet extern decat inline sau intern. Plaseaza-ti tot codul CSS intr-un fisierextern si foloseste referinta <link> in header. Folosind acest mod iti va fi mai usor sa modifici o anumita proprietate si se incarca mult mai bine.

[cc name=”nuebineasa”]

Mai bine asa:

[cc name=”betternowwithscc”]

12. Imparte CSSul mai multe fisiere

Daca lucrezi la un proiect mare ce are mai multe module, fiecare cu un stil dieferit, un look diferit iti recomand sa imparti CSS_ul in mai multe fisiere.Poti separa stylesheet-urile asa: una pentru pentru reset, una pentru layout, una pentru clasele si idurile generice si una pentur stilurile specifice ale modulelor. Aceasta tehnica iti va permite sa iti organizezi codul cu usurinta intr-un proiect mare, dar dupa cum bine stim cu mai multe fisiere avem mai multe cereri HTTP, deci mai mult timp de incarcare. Aici intervine meyoda Bridging CSS, adica un fisier CSS in care sunt importate toate celelalte fisiere css.

[cc name=”bridgecss”]

13. Comprimarea codului CSS

O data ce ai terminat de scris codul CSS pentru proiectul tau poti folosi o anumita unealta de comprima, de exemplu CSS Compressor pentru a reduce dimensiunea fisierului.

14. Fii consistent in scrierea CSSului

Cand lucrezi la mai multe proiecte este recomandat sa gasesti un mode de a organiza formatarea unui fisier CSS si sa il folosesti in toate proiectele.

Concluzia

Sper ca v-am ajutat catusi de putin explicandu-va aceste lucruri. Daca aveti si voi un sfat legat de acest subiect sunte-ti invitati sa le postati in sectiunea de comentarii.


Imi place ce faci aici
Daca iti place ce fac aici imi poti cumpara o cafea Buy Me a Coffee at ko-fi.com

Stefanescu Mihai
Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.
       

Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum.

Posteaza un comentariu

Comentarii

Cosmin
Cosmin | 2020-09-26 14:29
Vad ca te descurci, eu nu le am deloc cu astea insa? in viitoar poate colaboram un pic? poate ma ajuti sa imi fac blogul mai bun in privinta celor scrise de tine mai sus, contracost normal.

Mihai
Mihai | 2020-09-26 14:29
Nu stiu nici eu de nota 10, dar ma straduiesc sa invat zilnic ceva nou?.am sa te ajut bineinteles?.iar in curand sper ca am sa imi fac timp sa finisez niste theme wordpress la care lucrez si sa le public?

SydowBlog
SydowBlog | 2020-09-26 14:29
Bune aceste sfaturi mai ales pentru mine care acuma sunt in plin proces de invatare a HTML ? ului si CSS.

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.

🗝ïļ Login 🌟 Register

🔖 Bookmarks ⊞
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord ⊞

Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.

⮆ïļ