Scrierea de cod bun, webreference
Pentru a scrie o mulțime de HTML si CSS care ar trebui analizate - .. Diferite elemente, atribute, proprietăți, valori, etc. Scopul principal al fiecărei lecții până la acest punct a fost explicația diferitelor componente ale HTML si CSS, în speranța de a vă ajuta să înțeleagă fundamentele de bază ale ambelor limbi. Această lecție face un pas înapoi și se uită la HTML imagine mai abstract și CSS.
Mai precis, acest tutorial este dedicat celor mai bune practici de cod scris in HTML si CSS. Tehnicile descrise aici servesc drept cadru general pentru scrierea HTML si CSS. Acestea sunt utilizate în fiecare lecție și acestea ar trebui să fie întotdeauna păstrate în minte atunci când programare.
Metode de scriere HTML
Un set de bune practici concepute pentru a salva codul de simplu și bine organizat. Metode de bază în HTML nu diferă, scopul lor este de a scrie markup, bine structurat și standarde conforme. Recomandările descrise aici oferă o scurtă introducere în metodele de scriere HTML, iar lista nu este deloc cazul nu se limitează la acestea.
marcarea Standarde
HTML inerent iertându se referă la un limbaj care permite cod rău să execute și să afișeze cu diferite grade de precizie. cartografiere de succes, cu toate acestea, nu înseamnă că codul nostru corect semantic și se asigură că acest cod este compatibil cu standardele. În plus, codul rău este imprevizibil și nu poate fi sigur că veți obține sub hartă. Trebuie să fim atenți la scrierea HTML - atașamente pentru a acoperi toate elementele dreptul de a utiliza ID-uri și clase în mod corect, și întotdeauna testați codul nostru.
Codul de mai jos conține mai multe erori, inclusiv intro utilizează valoarea pentru atributului id de mai multe ori, atunci el trebuie să fie un element de valoare unică
și sunt închise în ordine greșită în primul paragraf, iar elementul <р> în al doilea paragraf nu se închide deloc.
Utilizarea elementelor semantice
Elemente de bibliotecă în HTML este destul de mare, este format din mai mult de 100 de elemente disponibile pentru utilizare. Decide care elementele de utilizat pentru a descrie conținutul diferit poate fi dificil, dar aceste elemente sunt fundamentul semantica. Trebuie să examinăm și re-verifica codul și asigurați-vă că folosim elementele semantice corespunzătoare. Oamenii ne vor mulțumi pe termen lung pentru crearea unui site mai accesibil, iar HTML va fi mult mai ușor de stil. Dacă nu sunteți sigur de cod, găsi un prieten care vă va ajuta și va efectua o analiză de rutină a codului.
Următoarele HTML nu utilizează corect elementele de titlu și punctul, dar în schimb sunt folosite elemente fara sens coafurii si o grupare de conținut.
Utilizați structura corectă a documentului
După cum sa menționat mai sus, HTML este un limbaj iertându, prin urmare, pagina care urmează să fie afișate fără utilizarea unor elemente sau doctype .
și . Fără doctype și aceste elemente structurale, paginile nu vor fi afișate corect pe orice browser.Trebuie să fim întotdeauna siguri că vom folosi structura corectă a documentului, inclusiv doctype și elementele .
și . Aceasta face ca paginile noastre sunt conforme cu standardele și pe deplin semantică și se asigură că acestea vor apărea ca avem nevoie.Păstrați o sintaxă organizată
Odată cu creșterea de pagini HTML pentru a controla devine o provocare. Din fericire, există câteva reguli simple, care pot ajuta la mentinerea sintaxa nostru este curat si organizat. Printre acestea se numără următoarele:
- Utilizați litere mici în numele elementelor, atribute, și valori; subelementele liniuță;
- Folosiți ghilimele duble strict în loc de ghilimele simple sau nu;
- scoate slash la capătul elementelor de auto-închidere; Valori mai mici pentru atributele Boolean.
Respectarea acestor reguli va ajuta să păstreze codul nostru este curat si lizibil. Aruncati o privire la două seturi de HTML de mai jos, cod bun mai ușor de perceput și de înțeles.
Utilizați valoarea practică a ID-uri și clase
Crearea de identificatori de valoare și clase poate fi una dintre cele mai dificile părți de a scrie HTML. Aceste valori trebuie să fie practice, legate de conținut, mai degrabă decât la stilul său. Folosind valoarea roșu pentru a descrie textul roșu nu este ideal, deoarece descrie aspectul conținutului. Dacă aveți vreodată nevoie pentru a schimba stilul textului la albastru, acesta trebuie să fie schimbat, nu numai CSS, HTML dar, de asemenea, în fiecare caz, în cazul în care clasa întâlnește roșu.
Mai jos se presupune în HTML, care este un roșu de avertizare. Cu toate acestea, în cazul în care stilul de avertizare se va schimba în portocaliu, roșu numele clasei va fi lipsită de sens și va duce probabil la confuzie.
Utilizați text alternativ pentru imagini
Imaginile trebuie să includă întotdeauna un atribut alt. Cititoarele de ecran și alte tipuri de software se bazează pe atributul alt. pentru a oferi un context pentru imagini.
Alt valoare de atribut trebuie să fie descrisă, care cuprinde o imagine. Dacă imaginea conține nimic contemporan, atributul alt pe de încă trebuie să fie activat, dar valoarea sa trebuie să fie gol pentru ecran cititori ignorat și nu a citit numele fișierului imagine.
Mai mult decât atât, în cazul în care imaginea nu poartă un sens important, este posibil, de exemplu, ca parte a interfeței cu utilizatorul, atunci când este posibil să fie incluse în CSS ca imagine de fundal, și nu ca un element .
Conținutul separat de stil
Niciodată, folosiți niciodată stiluri inline HTML. Se creează pagini care sunt prea lungi pentru a încărca, dificil de a menține și a provoca o durere de cap pentru designeri și dezvoltatori. În schimb, utilizați foi de stil externe, folosind clase de celule țintă și modul de utilizare a stilurilor.
Aici, în codul de rău toate modificările dorite în stilul trebuie să fie făcut în HTML. În consecință, aceste stiluri nu pot fi reutilizate și este probabil să sufere consistența stilului.
Evitați inutile
Când scrieți HTML este ușor să te dus de val, adăugarea unui element
Aici elementul acolo, pentru construirea de orice stiluri necesare. Deși funcționează și adaugă destul de un pic de bloat pe pagină, în cele din urmă nu suntem siguri că fiecare element Face.
Ar trebui să facem totul pentru a menține codul de mic și de a reduce markup, care leagă mai multe stiluri într-un singur element, dacă este posibil. În plus, trebuie să folosim elemente structurale adecvate în HTML5.
reorganiza în mod constant codul
De-a lungul timpului, site-uri și codul de bază continuă să evolueze și să crească, lăsând în urmă destul de un pic de gunoi. Nu uitați să eliminați codul vechi și stiluri după cum este necesar la editarea paginii. De asemenea, ia timp pentru a evalua și reorganiza codul după ce a fost scris, să caute modalități de a reduce și a face mai ușor de gestionat.
Metode de scriere CSS
La fel ca HTML, CSS tehnici de scriere axat pe păstrarea codului simplu și bine organizat. CSS conține, de asemenea, principii suplimentare legate de unele dintre subtilitățile limbii.
CSS a scrie câteva linii și spații
Când scrieți CSS este important să se pună fiecare selector și o descriere a normelor privind o nouă linie. Apoi, în cadrul fiecărui selector dorim să descrieri liniuță.
După selectorul și prima descriere se acoladă de deschidere, care trebuie să conțină un spațiu înainte de a fi. În descrierea trebuie să punem un spațiu după colon, atunci există o proprietate, și se termină cu punct și virgulă.
Utilizați numele de clasă corespunzătoare
nume de clase (sau valori) trebuie să fie modular și se tratează conținutul în interiorul unui element, și nu la aspectul său cât mai mult posibil. Aceste valori trebuie să fie scrise în așa fel încât să semene cu sintaxa CSS. Prin urmare, numele de clasă ar trebui să fie litere mici, și de a folosi cratima ca separator.
MARSHALL selectoare corecte
selectoare CSS poate scăpa de sub control, dacă acestea nu sunt întreținute cu grijă. Selectoare poate deveni cu ușurință prea mult timp și prea specifice.
Mai lungi și mai include selectorul rafinări, mai mare specificitatea acestuia. Cu cât specificitatea, cu atât mai probabil că se va rupe selectorul CSS în cascadă și cauza probleme nedorite.
În plus, menținerea specificității selectoare noastre cât mai scăzut posibil, să nu folosească ID-urile noastre în selectori. Identificatorii prea specifice, ridica rapid specificitatea unui selector și de multe ori încalcă cascada în CSS-fișiere. Contra identificatorii depășesc cu mult avantajele lor și ar fi înțelept să le evite.
Să folosim un selectori mai scurte și mai ales drepte. Se specifică doar două sau trei niveluri de investiții și de a elimina la fel de mult prea mult timp selectoare cât mai mult posibil.
Utilizați clase de beton, dacă este necesar
Există momente când un selector CSS este atât de lung și specifică, că nu mai poartă un sens. Acest lucru creează o întârziere de performanță și putere în timp ce rulează. În acest caz, se recomandă utilizarea unei singure clase. Clasa de utilizare la elementul țintă poate crea mai mult cod în HTML, dar va permite codul afișat mai rapid și va elimina orice obstacole pentru a controla.
De exemplu, dacă elementul încorporate în în interiorul elementului
Utilizare a proprietăților și valorile abreviat
Una dintre caracteristicile CSS este posibilitatea de a utiliza abrevieri pentru proprietățile și valorile. Cele mai multe dintre proprietăți și valori permit o scriere prescurtată. Ca un exemplu, în loc de a scrie patru proprietăți diferite, bazate pe margin- și valorile lor pentru setarea padding în jurul valorii de toate cele patru laturi ale elementului, folosiți o marjă de proprietate unică. care va stabili valorile pentru toate cele patru laturi simultan. Folosind versiunea prescurtată vă permite să identificați rapid și de a defini stiluri.
În același timp, atunci când doriți să instalați o singură valoare, ar trebui să nu utilizați o versiune prescurtată. Atunci când un ansamblu este doar marginea inferioară. Utilizați o proprietate-marginea de jos. Acest lucru asigură faptul că marja de alte valori nu vor fi suprascrise, și putem determina cu ușurință care a marjei aplicabile fără prea mult efort cognitiv.
Utilizați valori de culoare hexazecimale prescurtate
Dacă este posibil, utilizați o valoare prescurtare de culoare trohsimvolnoe hexazecimal, și întotdeauna a scrie caractere minuscule în orice valoare de culoare hexazecimală. Ideea, din nou, este de a rămâne consecvent pentru a evita confuzia și să facă sintaxa de codificare.
Unități picătură au valori nule
O metodă de reducere a sumelor de simplu CSS atunci când scrieți - unitățile de îndepărtare au valori nule. Indiferent care unitatea de lungime aplicată - pixeli, procente, em, etc -. Zero este întotdeauna zero. adăugând nu este necesară și nu poartă nici o valoare suplimentară.
Gruparea și alinierea versiune furnizor prefixe
În funcție de cazul în care prefixul este versiunea furnizor - în proprietate sau valoarea, alinierea poate fi modificată. De exemplu, următorul cod salvează o proprietate de fond bun aliniat la stânga, în timp ce funcția liniară gradient () cu prefixe sunt deplasate astfel încât valorile lor au fost ajustate pe verticală. Apoi, proprietatea-dimensionarea caseta cu prefixele sunt deplasate, astfel încât acestea au fost montate vertical.
Ca întotdeauna, obiectivul - de a face stilul mai ușor de citit și de editare.
prefixe versiune furnizor
Când se utilizează un prefix, trebuie să vă asigurați că pentru a pune versiunea unei proprietăți sau valoare fără prefixul în cele din urmă, după ce toate versiunile prefixul. Acest lucru asigură că browsere care acceptă versiunea fără prefixul va afișa stilul în funcție de plasarea sa în cascada de lectură stiluri, cu partea de sus a fișierului în partea de jos.
Modularitate de stiluri pentru reutilizare
CSS este construit pe care vă permite să reutilizați stiluri, în special, folosind clase. Din acest motiv, stilurile atribuite clasei, ar trebui să fie modular și disponibil pentru schimbul de informații între elementele atunci când este necesar.
Dacă secțiunea de știri este reprezentat în blocul care include frontierele, culoarea de fundal, și alte stiluri, știri de clasă poate părea o opțiune bună. Cu toate acestea, aceleași stiluri pot fi, de asemenea, aplicate pe lista evenimentelor viitoare. știri de clasă nu este adecvată în acest caz. Clasa feat-box-ar face mai mult sens și pot fi utilizate pe scară largă pe site.
Să sperăm că, principiile de scriere HTML frumos și CSS sunt din ce în ce mai clar. Cu toate că fiecare limbă are propria sa complexitate, cele mai multe dintre aceste metode pot fi împărțite între cele două limbi precum și cu multe alte limbaje de programare.
Personal, trebuie să facem tot posibilul pentru a sprijini aceste principii, în timp ce lucrează ca o echipă, trebuie să facem tot ce este posibil, de asemenea, de a instrui o echipă de aceste tehnici. La rândul său, echipa poate fi sugestii și metode valoroase, pe care trebuie să le urmeze.
Pentru a evidenția unele dintre principalele teme ale acestei lecții, HTML si CSS nostru ar trebui întotdeauna:
Aceste metode sunt doar începutul, și pentru că limbile evoluează, iar noi scriem mai mult si mai HTML si CSS, vom dezvolta noi metode. Este tot o parte din minunata cunoștințe de HTML și CSS.
Acum ești înarmat cu unele cunoștințe puternice de modul de a crea site-uri in HTML si CSS, și mă bucur să văd că faci cu ei. Ține-mă la curent cu privire la modul acesta se produce si crearea cu succes!
Resurse si Link-uri
Fiecare lecție vine cu un set de resurse pentru învățare și descoperiri suplimentare. Mai jos este prezentată o listă lungă de resurse și link-uri utile.
HTML si CSS
inspirație de design
Cadre și ghid stilistic
Când scrieți HTML este ușor să te dus de val, adăugarea unui element
Ar trebui să facem totul pentru a menține codul de mic și de a reduce markup, care leagă mai multe stiluri într-un singur element, dacă este posibil. În plus, trebuie să folosim elemente structurale adecvate în HTML5.
reorganiza în mod constant codul
De-a lungul timpului, site-uri și codul de bază continuă să evolueze și să crească, lăsând în urmă destul de un pic de gunoi. Nu uitați să eliminați codul vechi și stiluri după cum este necesar la editarea paginii. De asemenea, ia timp pentru a evalua și reorganiza codul după ce a fost scris, să caute modalități de a reduce și a face mai ușor de gestionat.
Metode de scriere CSS
La fel ca HTML, CSS tehnici de scriere axat pe păstrarea codului simplu și bine organizat. CSS conține, de asemenea, principii suplimentare legate de unele dintre subtilitățile limbii.
CSS a scrie câteva linii și spații
Când scrieți CSS este important să se pună fiecare selector și o descriere a normelor privind o nouă linie. Apoi, în cadrul fiecărui selector dorim să descrieri liniuță.
După selectorul și prima descriere se acoladă de deschidere, care trebuie să conțină un spațiu înainte de a fi. În descrierea trebuie să punem un spațiu după colon, atunci există o proprietate, și se termină cu punct și virgulă.
Utilizați numele de clasă corespunzătoare
nume de clase (sau valori) trebuie să fie modular și se tratează conținutul în interiorul unui element, și nu la aspectul său cât mai mult posibil. Aceste valori trebuie să fie scrise în așa fel încât să semene cu sintaxa CSS. Prin urmare, numele de clasă ar trebui să fie litere mici, și de a folosi cratima ca separator.
MARSHALL selectoare corecte
selectoare CSS poate scăpa de sub control, dacă acestea nu sunt întreținute cu grijă. Selectoare poate deveni cu ușurință prea mult timp și prea specifice.
Mai lungi și mai include selectorul rafinări, mai mare specificitatea acestuia. Cu cât specificitatea, cu atât mai probabil că se va rupe selectorul CSS în cascadă și cauza probleme nedorite.
În plus, menținerea specificității selectoare noastre cât mai scăzut posibil, să nu folosească ID-urile noastre în selectori. Identificatorii prea specifice, ridica rapid specificitatea unui selector și de multe ori încalcă cascada în CSS-fișiere. Contra identificatorii depășesc cu mult avantajele lor și ar fi înțelept să le evite.
Să folosim un selectori mai scurte și mai ales drepte. Se specifică doar două sau trei niveluri de investiții și de a elimina la fel de mult prea mult timp selectoare cât mai mult posibil.
Utilizați clase de beton, dacă este necesar
Există momente când un selector CSS este atât de lung și specifică, că nu mai poartă un sens. Acest lucru creează o întârziere de performanță și putere în timp ce rulează. În acest caz, se recomandă utilizarea unei singure clase. Clasa de utilizare la elementul țintă poate crea mai mult cod în HTML, dar va permite codul afișat mai rapid și va elimina orice obstacole pentru a controla.
De exemplu, dacă elementul încorporate în în interiorul elementului
Utilizare a proprietăților și valorile abreviat
Una dintre caracteristicile CSS este posibilitatea de a utiliza abrevieri pentru proprietățile și valorile. Cele mai multe dintre proprietăți și valori permit o scriere prescurtată. Ca un exemplu, în loc de a scrie patru proprietăți diferite, bazate pe margin- și valorile lor pentru setarea padding în jurul valorii de toate cele patru laturi ale elementului, folosiți o marjă de proprietate unică. care va stabili valorile pentru toate cele patru laturi simultan. Folosind versiunea prescurtată vă permite să identificați rapid și de a defini stiluri.
În același timp, atunci când doriți să instalați o singură valoare, ar trebui să nu utilizați o versiune prescurtată. Atunci când un ansamblu este doar marginea inferioară. Utilizați o proprietate-marginea de jos. Acest lucru asigură faptul că marja de alte valori nu vor fi suprascrise, și putem determina cu ușurință care a marjei aplicabile fără prea mult efort cognitiv.
Utilizați valori de culoare hexazecimale prescurtate
Dacă este posibil, utilizați o valoare prescurtare de culoare trohsimvolnoe hexazecimal, și întotdeauna a scrie caractere minuscule în orice valoare de culoare hexazecimală. Ideea, din nou, este de a rămâne consecvent pentru a evita confuzia și să facă sintaxa de codificare.
Unități picătură au valori nule
O metodă de reducere a sumelor de simplu CSS atunci când scrieți - unitățile de îndepărtare au valori nule. Indiferent care unitatea de lungime aplicată - pixeli, procente, em, etc -. Zero este întotdeauna zero. adăugând nu este necesară și nu poartă nici o valoare suplimentară.
Gruparea și alinierea versiune furnizor prefixe
În funcție de cazul în care prefixul este versiunea furnizor - în proprietate sau valoarea, alinierea poate fi modificată. De exemplu, următorul cod salvează o proprietate de fond bun aliniat la stânga, în timp ce funcția liniară gradient () cu prefixe sunt deplasate astfel încât valorile lor au fost ajustate pe verticală. Apoi, proprietatea-dimensionarea caseta cu prefixele sunt deplasate, astfel încât acestea au fost montate vertical.
Ca întotdeauna, obiectivul - de a face stilul mai ușor de citit și de editare.
prefixe versiune furnizor
Când se utilizează un prefix, trebuie să vă asigurați că pentru a pune versiunea unei proprietăți sau valoare fără prefixul în cele din urmă, după ce toate versiunile prefixul. Acest lucru asigură că browsere care acceptă versiunea fără prefixul va afișa stilul în funcție de plasarea sa în cascada de lectură stiluri, cu partea de sus a fișierului în partea de jos.
Modularitate de stiluri pentru reutilizare
CSS este construit pe care vă permite să reutilizați stiluri, în special, folosind clase. Din acest motiv, stilurile atribuite clasei, ar trebui să fie modular și disponibil pentru schimbul de informații între elementele atunci când este necesar.
Dacă secțiunea de știri este reprezentat în blocul care include frontierele, culoarea de fundal, și alte stiluri, știri de clasă poate părea o opțiune bună. Cu toate acestea, aceleași stiluri pot fi, de asemenea, aplicate pe lista evenimentelor viitoare. știri de clasă nu este adecvată în acest caz. Clasa feat-box-ar face mai mult sens și pot fi utilizate pe scară largă pe site.
Să sperăm că, principiile de scriere HTML frumos și CSS sunt din ce în ce mai clar. Cu toate că fiecare limbă are propria sa complexitate, cele mai multe dintre aceste metode pot fi împărțite între cele două limbi precum și cu multe alte limbaje de programare.
Personal, trebuie să facem tot posibilul pentru a sprijini aceste principii, în timp ce lucrează ca o echipă, trebuie să facem tot ce este posibil, de asemenea, de a instrui o echipă de aceste tehnici. La rândul său, echipa poate fi sugestii și metode valoroase, pe care trebuie să le urmeze.
Pentru a evidenția unele dintre principalele teme ale acestei lecții, HTML si CSS nostru ar trebui întotdeauna:
Aceste metode sunt doar începutul, și pentru că limbile evoluează, iar noi scriem mai mult si mai HTML si CSS, vom dezvolta noi metode. Este tot o parte din minunata cunoștințe de HTML și CSS.
Acum ești înarmat cu unele cunoștințe puternice de modul de a crea site-uri in HTML si CSS, și mă bucur să văd că faci cu ei. Ține-mă la curent cu privire la modul acesta se produce si crearea cu succes!
Resurse si Link-uri
Fiecare lecție vine cu un set de resurse pentru învățare și descoperiri suplimentare. Mai jos este prezentată o listă lungă de resurse și link-uri utile.