Share
Sigur, oricine poate scrie CSS. Chiar și programele o fac pentru tine acum. Dar este CSS orice bun? Iată cinci sfaturi pentru a începe să vă îmbunătățiți.
Serios, utilizați întotdeauna o resetare de un fel. Indiferent dacă utilizați resetarea Eric Meyer, resetarea YUI sau resetarea personalizată, utilizați doar ceva.
Poate fi la fel de simplu ca eliminarea margini și a căptușelii din toate elementele:
html, corp, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote; umplutura: 0;
Eric Meyer și Yui Resets sunt minunate, dar pentru mine, acestea merg prea departe. Mă simt ca și cum ai termina totul, apoi redefiniți o mulțime de proprietăți asupra elementelor. Acesta este motivul pentru care Eric Meyer recomandă să nu luați doar stilurile sale de stiluri de resetare și să le aruncați în proiectele dvs. dacă există o modalitate mai eficientă de utilizare a acestora. Tweak it. Construiți-o. Faceți-vă propriul dvs..
Oh și vă rog, opriți acest lucru:
* marja: 0; umplutura: 0;
Este nevoie de mai mult timp pentru a procesa și ce credeți că ar trebui să se întâmple cu un buton radio atunci când eliminați căptușeala? Elementele formate pot uneori să facă unele lucruri funky, așa că ar fi mai bine să lași doar pe unii singuri.
De exemplu, ați crede că este mai rapid găsiți proprietatea margin-right?
div # antetul h1 z-index: 101; culoare: # 000; poziție: relativă; linia-înălțime: 24px; margin-dreapta: 48px; frontieră-jos: 1px solid #dedede; font-size: 18px;
div # antetul h1 border-bottom: 1px solid #dedede; culoare: # 000; font-size: 18px; linia-înălțime: 24px; margin-dreapta: 48px; poziție: relativă; z-index: 101;
Nu puteți să-mi spuneți că Exemplul 2 nu este mai rapid. Prin alfabetizarea proprietăților dvs., creați această consistență care vă va ajuta să reduceți timpul petrecut în căutarea unei anumite proprietăți.
Cunosc unii oameni care organizează o cale și alții care organizează alta, dar la compania mea am luat o decizie de consens pentru a organiza toate în ordine alfabetică. A ajutat cu siguranță la lucrul cu codul altor persoane. Mă aplec de fiecare dată când intru într-o foaie de stil unde proprietățile nu sunt sortate în ordine alfabetică.
Ar trebui să vă organizați foaia de stil astfel încât să fie ușor de găsit lucrurile și elementele aferente sunt aproape împreună. Utilizați comentariile în mod eficient. De exemplu, așa structrez foile de stil:
/ ***** Resetare ***** / Eliminați marginea și umplutura din elemente / ***** Elemente de bază ***** / Definiți stiluri pentru elementele de bază: body, h1-h6, ul, ol, a , p, etc / ***** Clase generice ***** / Definirea stilurilor pentru lucruri simple cum ar fi plutirea pe laturi, eliminarea marginea inferioară a elementelor etc. Da, acestea nu pot fi la fel de semantice ca și noi dar ele sunt necesare pentru codificarea eficientă / ***** Basic Layout ***** / Definirea șablonului de bază: antet, subsol etc. * Header ***** / Definiți toate elementele din antet / ***** Conținut ***** / Definiți toate elementele din zona de conținut / ***** Footer ***** / Definiți toate elementele în subsolul / ***** Etc ***** / Continuați să definiți celelalte secțiuni unul câte unul
Folosind comentarii și grupând elemente similare, devine mult mai rapid să găsești ceea ce cauți.
Indiferent de modul în care decideți să codificați, rămâneți cu el. Sunt bolnav și obosit de întreaga linie față de mai multe linii pentru dezbaterea CSS. Nu există nici o dezbatere! Toată lumea are opinia proprie, deci alegeți ceea ce funcționează pentru dvs. și păstrați-l cu el în întreaga foaie de stil.
Personal, folosesc o combinație a celor două. Dacă un selector va avea mai mult de 3 proprietăți, îl rup în mai multe rânduri:
div # header float: stânga; lățime: 100%; div # antet div.column border-right: 1px solid #ccc; float: dreapta; margin-dreapta: 50px; padding: 10px; lățime: 300px; div # antetul h1 float: left; poziție: relativă; lățime: 250px;
Funcționează pentru mine deoarece 3 proprietăți sunt despre ceea ce se potrivește pe o linie în editorul meu de text înainte de înfășurarea pe altă linie. Deci, trebuie doar să dai seama ce funcționează pentru tine și să fii consecvent.
Nu îndrăzni să atingi foaia de stil până când nu ai scris marcajul tău!
Când mă pregătesc să desenez un site, trec și marchez întregul document de la eticheta corpului de deschidere până la eticheta corpului de închidere înainte de a crea chiar un fișier CSS. Nu adaug nici o divs, id-uri sau clase inutile. Voi adăuga câteva diviziuni generice, cum ar fi antetul, conținutul, subsolul pentru că știu că aceste lucruri vor exista.
Prin marcarea mai întâi a documentului, nu veți avea parte de astfel de boli, cum ar fi divita și clasita, care uneori pot fi fatale! Trebuie doar să adăugați acele lucruri odată ce ați început să scrieți CSS și să realizați că veți avea nevoie de un alt cârlig pentru a realiza ceea ce încercați să obțineți.
Utilizați selectorii descendenți ai CSS pentru a viza elementele de copii; nu adăugați automat doar o clasă sau un element id la element. Doar aminteste-ti, CSS nu are valoare fără un document bine formatat.
* Nota editorului: Nu pot sublinia acest lucru suficient. După cum a spus Trevor, nu atingeți nici măcar fișierul CSS până când marcarea este 100% completă.
Acestea sunt doar câteva sfaturi care mă ajută să scriu un cod mai bun. Acest lucru nu este în nici un caz sfârșitul listei. Așa cum am veni cu alții, voi împărți.
Ce sfaturi aveți pentru a scrie mai bine CSS?
Accentsconagua