Cum de a scrie un bun și curat cod css

Utilizați paragrafe.

Separarea de cod în paragrafe este un alt mod de a face codul foarte structurat și ușor de găsit regulile potrivite. Chiar și o simplă diviziune a paragrafelor claselor și ID-uri, codul mult mai ușor de citit și mai ușor orientarea în ea. S-ar părea lucruri foarte mici, dar, de fapt, ei sunt capabili de a îmbunătăți foarte mult codul și face mai ușor să lucreze cu ei în dezvoltarea și modificarea în viitor.

Utilizați intrarea de cod prescurtat.

cod scurt este capabil să scrie unele reguli CSS în formă de rezumat. Eu cred că acesta este unul dintre lucrurile cele mai convenabile despre CSS. De exemplu, în loc de reguli pentru padding padding-top: 5px; padding-dreapta: 5px; padding-bottom: 5px; padding-left: 5px; putem scrie padding mult mai scurtă: 5px 5px 5px 5px;. O diferență semnificativă, atât în ​​scris cât și în percepția, nu-i așa? Cu toate acestea, în ciuda această oportunitate, există multe documente CSS care nu are codul de scurt.

Imaginați-vă că aveți 350 de linii de cod CSS, în cazul în care fiecare clasă sau ID-ul este format din cinci reguli și utilizați un exemplu cod scurt pentru regulile de marjă. Acum, încercați să utilizați un cod scurt, a scrie un cod de norme detaliate pentru marja. margin-top, marja de-dreapta, marja de-jos, stânga-marja. Se pare că fiecare clasă sau ID-ul primește trei linii suplimentare. Așa că am crește 350 de linii de cod 500. poluchetsya pe care tocmai am adăugat în plus 150 de linii de cod inutile, compromite toate dokumet de navigație și complică regulile de lucru.

Prin urmare, în cazul în care veți vedea se potrivesc folosind o înregistrare scurtă a regulilor pentru a le reglementa, și, în același timp, pentru a crește viteza.

Utilizați o singură regulă pe linie.

Unul dintre lucrurile cele mai enervante care pot fi observate adesea în codul CSS, un număr record de reguli pe aceeași linie. Cred că nu este doar urât, dar, de asemenea, ineficiente. Eficiența de cod începe cu organizația, deoarece organizația accelerează de codificare și facilitează orientarea în cod. Toate acestea conduc în cele din urmă la o productivitate. Fără a crea haos și care are reguli CSS separate pe linii separate, vă facilitează foarte mult viața lor. Îl va înțelege pe termen lung, atunci când trebuie să facă modificări în document cu stiluri.

Evidențiați hacks într-un fișier separat.

separa întotdeauna stilurile khaki pentru toate dumneavoastră preferat Internet Explorer din documentul principal cu stiluri. Să mai ales un document CSS aveți în continuare toate regulile paginilor dvs. să fie afișat în browserele normale. Creați un document separat pentru stiluri cu CSS hacks pentru diferite versiuni de Internet Explorer. Dacă se amestecă pândarilor cu documentul principal, nu va complica doar documentul în sine, dar nu face valabil. Pentru că nu poate încăpea într-un singur document, codul pentru diferite versiuni de browser. Prin urmare, pentru a simplifica cât mai mult posibil stiluri, separați-le în documente individuale. Deci, veți obține o structură bine organizată.

Să nume semnificative de clasă CSS și ID-

Destul de des, atunci când timpul este frumusețea scurtă și mai ales o dată, dezvoltatorul creează o clasă și îl numește primul nume care vine în minte. Practic, este clar pentru el că mai târziu tăieturi singur chiar el uita. Și problema este că. Odată cu trecerea timpului, atunci când vine vorba de necesitatea de a schimba ceva în stilurile, nu mai pot înțelege ceea ce face ca acest lucru sau acea clasă. Pentru aceasta trebuie să deschidă HTML și pentru a găsi în ea un nume de clasă și să încerce să înțeleagă ceea ce face. În schimb, în ​​cazul în care o clasă are un nume cu semnificație, ea facilitează foarte mult editarea de CSS.

Eliminați clase CSS neutilizate și ID-ul imediat.

Destul de des, ceea ce face modificări la proiect, suntem crearea de noi clase și ID-uri, înlocuirea lor vechi și deja inutile. Uneori, pur și simplu nu folosi ceea ce clasele și ID-urile. Dar, în loc să eliminați imediat elemente nefolosite, noi le păstrați pentru un motiv oarecare. Treptat, documentul începe cu stilurile conțin mai multe clase neutilizate și ID-uri, complicând lucrul cu documentul. Începe să apară confuzie în rândul obiectele utilizate și neutilizate. Prin urmare, ar trebui să facă o regulă de a elimina imediat elemente care nu sunt necesare, în cazul în care acestea nu sunt utilizate pe paginile. Dacă vă simțiți că unele dintre ele ar putea avea nevoie în viitor, mutați-le într-un singur fișier arhivă. Nu le păstrați în documentul principal.

Utilizați ordinea alfabetică.

Există un alt punct pozitiv. care este mai ușor pentru tine de a lucra cu codul și modificarea ulterioară. Această ordine alfabetică la locul claselor și ID-uri. Si cel mai important, că într-adevăr funcționează. Și chiar și regulile din cadrul claselor și ID-urile este mai bine să aibă de asemenea, în ordine alfabetică. Deci, regulile sunt bine organizate, și veți găsi cu ușurință regula dreptul rapid ghidat în ordine alfabetică. Puteți verifica această declarație la orice listă, iar în cazul în care lista este sortată în ordine alfabetică, este mult mai ușor de citit.

Se pun selectorii împreună

Un alt mod simplu de a organiza documentele cu stiluri, o combinație de diferite selectoare în cazul în care au definiții similare sau reguli de stil. De exemplu, dacă aveți un stil de definiții similare pentru tag-ul li și ol. Apoi, le puteți combina într-o singură definiție. Deci ai economisi spațiu și pentru a atinge o notație mai compactă, care este întotdeauna mai ușor de înțeles.

Împărțiți documentul complex CSS la un simplu câteva

Dacă se lucrează la un proiect foarte mare, și să încerce să schimbe stilurile de documente, încurcându-se la cozi interminabile de CSS, atunci aș sfătui să pur și simplu împărțiți în mai mici și mai simple. Mai întâi încercați să împartă în mod logic documentul cu stiluri în mai multe grupuri. Și apoi împărțiți documentul în mai multe fișiere și să le plaseze în grupul.

Acest lucru va facilita în mare măsură modificări suplimentare. In loc de a privi la un fișier mare anumite reguli, puteți deschide fișierul direct și de a lucra cu ea deja. Vei economisi foarte mult timp și pentru a simplifica treaba cu stil.

De exemplu, puteți selecta stilul pentru tipografie într-un singur fișier, iar stilurile sunt responsabile pentru elementele de format în cealaltă. Și acum, dacă trebuie să modificați sau să adăugați stiluri pentru tipografie, puteți deschide cu ușurință și rapid fișierul corespunzător, fără a schimba restul.

Cu toate acestea, pentru divizia de proiecte mici în fișiere pot complica treaba cu stil. Numai atunci când se lucrează cu CSS mare de documente devine dificil, și trebuie să se aplice doar raezdlenie în fișiere mai mici.

Concluzie.

Rămâneți conectat

Prin citirea acestui site, sunteți de acord cu utilizarea de fișiere Cookie. În caz contrar, lăsați acest site. Sunt de acord