8 beste fremgangsmåter for å skrive ren HTML-kode

Har du noen gang sett på HTML og lurt på ...

Skriver jeg god kode ?!

Ser det profesjonelt ut? Gjør jeg ting riktig? Er det slik ren HTML-kode ser ut?

Det å ha disse spørsmålene er normalt og bra, spesielt hvis du ikke vil ende opp med rotete, virkelige, slurvete spaghettikoder som ser ut som:

Å skrive ren kode bør være en av de største bekymringene dine fordi de fleste websider blir presentert via HTML. Du ønsker ikke å rote grunnlaget for nettstedet ditt. Det er bare galt og flaut.

Her finner du 8 gode fremgangsmåter å glemme tvilen og skrive ren riktig HTML som vil imponere alle som leser den.

1. Gi en f ** k

Alvor. Det viktigste du trenger for å skrive god kode, er ønsket om å gjøre ting riktig. Det er enkelt å skrive ren HTML-kode, men du må ta vare og være veldig oppmerksom.

“Ren kode er en kode som er skrevet av noen som bryr seg” - Michael Feathers

Koden din gjenspeiler hvilken type utvikler du er. Du kan se om noen brenner for koding, eller om han ikke gir noen f ** k bare ved å lese noen få linjer med HTML-koden. Det er ikke tilfeldig at late uprofesjonelle mennesker er de som skriver dårlig og uorganisert kode.

2. Innrykk

Innrykket kode er enklere å lese, enklere å forstå, lettere å endre og lettere å vedlikeholde. Bare se på hvor vanskelig det er å forstå forholdet mellom foreldre og barn mellom elementer når koden ikke er riktig innrykket:

Dårlig HTML-kode:
  
 
 
Bedre HTML-kode:

  
    
      

Hvor mange mellomrom bør du bruke for innrykk? Mange sier 4 mellomrom, mange andre sier 2, og nesten alle hater faner.

Mitt råd? Ikke tenk over det, det er ikke veldig viktig å bruke en spesifikk romverdi. Det som virkelig betyr noe er ...

3. Bare vær konsekvent

Å skrive ren HTML-kode handler ikke alltid om å velge god praksis og unngå dårlige. Mange ganger kan du bruke forskjellige tilnærminger for å skrive den samme kodelinjen.

For eksempel:

  • Du kan bruke strek eller understrek for ID og klasser
  • Du kan bruke enkelt sitat eller dobbelt sitat argument
  • Du kan innrykk med 2 eller 4 mellomrom

Bare vær konsekvent. Når du finner en spesifikk praksis du liker, hold deg til den og bruk den overalt. Inkonsekvens gjør koden din ekstremt forvirrende for deg og for den stakkars sjelen som må lese den.

4. Utrydde “Divitis”

“Divitis” er et morsomt navn på et vanlig problem i HTML. Vi bruker ofte divisjoner, hovedsakelig fordi vi ønsker å pakke inn og målrette alle elementer for styling i CSS. Så ender vi opp med å ha en evig liste over divs som er helt unødvendige:

Dårlig HTML-kode:
  
Overskrift
  
Undertittel
  
Legg inn innhold
  
    
          
  • Element 1
  •       
  • Element 2
  •        
Bedre HTML-kode:
  

overskrift   

Undertittel   

Legg ut innhold

  
        
  • Element 1
  •     
  • Element 2
  •   

Akkurat som forfattere redigerer utkastet mange ganger i løpet av skriveprosessen, bør du stadig refaktorere eller skrive om HTML-koden. Reduser antall divs og rydd opp i koden din og sletter alle unødvendige elementer.

5. Unngå kommentarer

HTML er ikke et programmeringsspråk, kommentarer er ikke nødvendige fordi HTML-merking er veldig selvforklarende. Hvis du synes at du kommenterer HTML-en din mye, bør du gå gjennom referansen til HTML-elementer.

"Ikke kommenter dårlig kode. Omskriv det. ”- Brian W. Kernighan

Koden din blir ikke lettere å forstå bare fordi du legger til kommentarer overalt. Du kan bruke dem til å gjøre ting litt mer oversiktlige (for eksempel for å vise at du lukker en div etter mange kodelinjer). Men ikke kommenter ting som er åpenbare eller kode som er dårlig skrevet.

6. Klasse = "klart navn"

Hva betyr klasse = “wpr”?

Bredde avsnitt? WordPress? Whopper ?! Ren HTML-kode skal ikke se ut som et trivia-spill.

Bruk meningsfylte navn på Ids og Classes. De skal være korte, beskrivende og representere bare ett konsept. Det vil gjøre HTML-en klarere og stylingsprosessen enklere.

Tror du ikke det ville vært bedre hvis du kalte klassen din "innpakning" i stedet for "wpr"?

7. Bruk Whitespace

Mange skriver kode som er knust sammen uten å bruke hvite mellomrom. Resultatet? Det er som å lese en bok uten tegnsetting eller avsnitt:

Helvete:

Tabell

Data 1 Data 2
Calcutta Orange
Bedre kode:

Tabell


  
    
    
  
  
    
Data 1 Data 2
Calcutta      Orange   

Bruk mellomrom: innrykk, tomme linjer, linjeskift. Andre mennesker (inkludert deg) skal kunne lese koden din i fremtiden uten å ha hodepine. Det er ok å minifisere filene dine for å gjøre dem mindre etter at du har skrevet ren lesbar HTML-kode.

8. Kopier fra de beste

De beste artistene i verden lærte seg håndverket sitt ved å gjenskape arbeidet til mennesker de beundret. Du kan bruke den samme strategien for å skrive ren HTML-kode (som også er en ganske kreativ prosess). Den enkleste måten å lære å skrive vakker ren kode er enkel: les vakker ren kode, og deretter replikerer den.

“De som ikke vil etterligne noe, produserer ingenting. “- Salvador Dalí

Du kan:

  • Utforsk Open Source-prosjekter. En av grunnene til at de eksisterer er, slik at vi alle kan lære og forbedre å se på hverandres jobb.
  • Les blogger og artikler som lærer deg de beste kodingspraksisene.
  • Ta Udemy utviklerkurs. Velg de som har fantastiske anmeldelser.

Du vil finne at det ikke er en definitiv riktig måte å gjøre ting på ... men du vil også oppdage at det er en enorm forskjell mellom ren og rotete HTML-kode.

Og du vil ikke at koden din skal se ut som et fullstendig rot, ikke sant? ;)

*** Likte du dette? Gi meg noen få klapper slik at andre kan oppdage denne artikkelen ***