Codul de scriere este ușor, lucrul dificil este să scrieți un cod de calitate curat și ordonat. Pentru a atinge acest obiectiv, este necesară metodologia, care este dobândită cu experiență. De obicei acest proces implică practică și o lungă perioadă de timp, rezultând de multe ori copleșitoare. Din fericire, există o serie de bune practici care pot fi orientate (mai ales când începem) și că m-am ajutat mult pentru a începe.
În acest articol, vom vedea 12 bune practici de HTML și CSS foarte ușor de aplicat și vor îmbunătăți calitatea codului nostru.
link mai bine decât @Import
pentru a include foi de stil la HTML-ul nostru, este cel mai bine să utilizați etichete de legătură care oferă limba în sine. Rețineți că numărul de mai multe sume de frunze vor lua pagina pentru încărcare.
Utilizați clase în loc de ID-uri
id Nu contribuie avantajul dincolo de faptul că nu pot fi repetate (sau nu). Când aplicați stiluri la elementele noastre, este mai bine să atribuiți clase. Acest lucru nu înseamnă că ID-urile nu ar trebui utilizate, de fapt, ele sunt destul de utile pentru JavaScript deoarece permit accesul la elemente DOM consumând puține resurse.
În rezumat, rezervați ID-urile pentru JavaScript dvs. și restul Denumiți-l cu clase În acest fel nu va trebui să vă amintiți dacă atribuiți un ID sau o clasă și veți pierde mai puțin timp.
nume de clasă
Există multe forme și recomandări pentru a numi orele . Personal folosesc nomenclatura BEM, deoarece este foarte auto-descriptivă și este destul de standardizată.
Se recomandă, de asemenea, clasele de stare (care sunt cele pe care le atribuim cu JavaScript pentru a manipula stiluri într-o anumită situație ) au un nume similar, de exemplu: is-hide, is-show 4e59cc7877 „> etc.
Evitați declararea stilurilor online
Când creăm codul HTML, trebuie să credem că numai structura paginii trebuie definită, nu stilurile.
<span style="color: blue">Texto</span>Acest cod HTML a declarat un stil online, care nu numai că creează confuzie la nici o altă persoană care citește codul, ci și suprascrie la orice stil atribuit de CSS . Lucrul recomandabil este de a atribui o clasă și de a aplica stiluri în CSS.
Cu toate acestea, există ocazii în care este util să declarați stiluri online: când le definim prin JavaScript (pentru a crea efecte paralaxe de exemplu ) sau când scriem un element pe un CMS și dorim un element care să aibă un stil foarte specific.
Resetați întotdeauna stilurile
Browserele implicite Adăugați margini și anumite stiluri la de bază Etichete de HTML. Problema este că nu toate browserele aplică aceleași stiluri, care uneori pot descoperi desenele noastre. Soluția este resetată stilurile, iar acest lucru este cel mai cunoscut sunt normalizați sau resetați. Ce să alegi? Diferența dintre aceste două este că primul este responsabil pentru aplicarea stilurilor de bază, astfel încât acestea să fie aceleași pentru toate browserele, în timp ce al doilea elimină marginile tuturor elementelor. Personal, de obicei, prefer cel de-al doilea, dar cu un mic adăugat:
box-sizing de la 200px și apoi adăugăm o margine de 2px, acel container va ocupa . Ciudat, nu? Ceea ce face box-sizing: border-box este doar de mult margine pe care o adaug la tine Continue Masurarea 200px.
Comentariu CSS
Limbile de programare sunt concepute pentru a le înțelege o mașină, nu umană. Trebuie să ne gândim la viitorul nostru sine sau la o altă persoană care poate citi codul nostru, din acest motiv este întotdeauna bun să lăsăm comentarii.
div>
/* Esto es un comentario simple */Este, de asemenea, o idee bună să introduceți secțiunile cu comentarii sub forma unui bloc:
0 nu are o unitate
de fiecare dată când o valoare este zero, ceea ce trebuie să nu indice nici o unitate. Este incorect să utilizați sau 0em.
Evitați utilizarea! Important
având Un bun control al cascadei este esențial pentru a crea coduri curate și ordonate. Ce facem cu !important este de a modifica funcționarea naturală a cascadei, un exemplu:
p { color: red !important;}. . .p { color: blue;} În acest cod paragrafele ar trebui să aibă culoarea albastră, dar după ce a declarat un !important ar colecta roșu.Este ilogic și face codul care face codul, deci trebuie să limităm utilizarea sa ca o ultima opțiune.
Selectoare de grup
Dacă avem următorul cod:
h1 { font-size: 2.5em; font-weight: 800;}h2 { font-size: 2em; font-weight: 800;}ne putem sintetiza astfel încât este mai puțin redundant:
h1,h2 { font-weight: 800;}h1 { font-size: 2.5em;}h2 { font-size: 2em;}În acest fel, dacă un viitor vrem să schimbăm grosimea sursei, va trebui să modificăm o valoare.
Urmați un ghid de stil CSS
CSS este un limbaj nereimar și care poate converti într-o problemă când lucrați ca o echipă sau urmați o structură bună. De aceea este mai bine să urmați un ghid de stiluri care unifică și face ca toți membrii să scrie codul egal. Una dintre cele mai cunoscute și cele mai bune reputații este ghidul de stil la care a elaborat Airbnb. Desigur, există mai mult și puteți crea întotdeauna propriul dvs. dacă îl considerați în timp util. Scopul final este că tot codul de aplicație este uniform Unul dintre cele mai populare și cele care se utilizează personal este SASS.
preprocesoare ne permit să avem multe foi de stiluri care sunt apoi compilate într-una, deci nu afectează performanța. Acest lucru evită să se ocupe de o foaie monstruoasă de mii de linii și ne salvează mult timp. De aceea este important să urmați o structură bună și, de asemenea, un bun ghid în stil SASS. Aceasta este structura pe care o folosesc de obicei în proiectele mele, extrasă din legătura anterioară:
Estructura del proyecto└── scss ├── abstracts ├── _mixins.scss └── _var.scss // Declaración de variables de SASS o CSS ├── base ├── _base.scss // Estilos básicos que sobreescriben estilos de etiquetas HTML (sin clases) ├── _general.scss // Estilos básicos aplicados a clases de CSS └── _typography.scss // Estilos básicos de tipografía (familia, tamaños, grosor, etc.) ├── components // Aquí irían los estilos de algún componente en concreto ├── layout // Aquí irían los estilos de alguna sección que se repite en varias páginas ├── pages // Aquí irían los estilos de las diferentes páginas que componen el proyecto ├── themes // Aquí irían los estilos puramente estéticos (como colores) └── style.scss // Fichero principal donde importamos el resto de archivosTestați designul în mai multe browsere
Testarea esențială Designul cel puțin în Firefox, Chrome și Edge și pe dispozitivele mobile cel puțin în crom. Dacă nu vă temeți de viața voastră și doriți să aveți un sprijin complet, puteți încerca Internet Explorer 11, deși la ușile 2019 nu s-ar întâmpla nimic nu vă va oferi sprijin.