8 bedste fremgangsmåder til at skrive ren HTML-kode

Har du nogensinde kigget på din HTML og spekuleret på…

Skriver jeg en god kode ?!

Ser det professionelt ud? Gør jeg tingene rigtigt? Er det sådan, ren HTML-kode ser ud?

At have disse spørgsmål er normalt og godt, specielt hvis du ikke vil ende med at skrive rodet, virvlet, sjusket spaghettikode, der ligner:

At skrive ren kode skal være en af ​​dine største bekymringer, fordi de fleste websider præsenteres via HTML. Du ønsker ikke at redde fundamentet på dit websted. Det er bare forkert og pinligt.

Her finder du 8 gode praksis at glemme disse tvivl og skrive ren korrekt HTML, der vil imponere alle, der læser den.

1. Giv en f ** k

Helt seriøst. Den vigtigste ting, du har brug for for at skrive en god kode, er dit ønske om at gøre tingene rigtigt. Det er let at skrive ren HTML-kode, men du er nødt til at pleje og være meget opmærksom.

“Ren kode er en kode, der er skrevet af en, der bryder sig” - Michael Feathers

Din kode afspejler den type udvikler, du er. Du kan se, om nogen brænder for kodning, eller om han ikke giver et f ** k bare ved at læse et par linjer i hans HTML-kode. Det er ikke tilfældigt, at dovne uprofessionelle mennesker er dem, der skriver dårlig og uorganiseret kode.

2. Indrykket

Indrykket kode er lettere at læse, lettere at forstå, lettere at ændre og lettere at vedligeholde. Se bare på, hvor vanskeligt det er at forstå forældre-barn-forholdet mellem elementer, når koden ikke er indrykket korrekt:

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

Hvor mange mellemrum skal du bruge til indrykk? Mange mennesker siger 4 mellemrum, mange andre siger 2, og næsten alle hader faner.

Mit råd? Tænk ikke over det, det er ikke rigtig vigtigt at bruge en bestemt pladsværdi. Det, der virkelig betyder noget, er ...

3. Bare vær konsekvent

At skrive ren HTML-kode handler ikke altid om at vælge god praksis og undgå dårlige. Mange gange kan du bruge forskellige tilgange til at skrive den samme kodelinie.

For eksempel:

  • Du kan bruge bindestreg eller understregning til id'er og klasser
  • Du kan bruge enkelt citat eller dobbelt citat argument
  • Du kan indrykke med 2 eller 4 mellemrum

Bare vær konsekvent. Når du finder en bestemt praksis, du kan lide, skal du holde dig til den og bruge den overalt. Inkonsekvens gør din kode yderst forvirrende for dig og for den fattige sjæl, der er nødt til at læse den.

4. Udrydde “Divitis”

“Divitis” er et sjovt navn på et almindeligt problem i HTML. Vi overforbruger ofte divs, primært fordi vi ønsker at pakke og målrette alle elementer til styling i CSS. Så ender vi med en evig liste over divs, der er helt unødvendige:

Dårlig HTML-kode:
  
Overskrift
  
Undertekst
  
Send indhold
  
    
          
  • Element 1
  •       
  • Element 2
  •        
Bedre HTML-kode:
  

Overskrift   

Undertekst   

Send indhold

  
        
  • Element 1
  •     
  • Element 2
  •   

Ligesom forfattere redigerer deres udkast mange gange under skriveprocessen, skal du konstant refaktorere eller omskrive din HTML. Reducer antallet af divs og rydd i din kode, der sletter alle unødvendige elementer.

5. Undgå kommentarer

HTML er ikke et programmeringssprog, kommentarer er ikke nødvendige, fordi HTML-markering er meget selvforklarende. Hvis du finder dig selv at kommentere din HTML meget, skal du gennemgå HTML-elementets reference.

”Kommenter ikke dårlig kode. Omskriv det. ”- Brian W. Kernighan

Din kode bliver ikke lettere at forstå, bare fordi du tilføjer kommentarer overalt. Du kan bruge dem til at gøre tingene lidt mere klare (for eksempel at vise, at du lukker en div efter mange kodelinjer). Men kommenter ikke ting, der er indlysende eller kode, der er dårligt skrevet.

6. Klasse = "klart navn"

Hvad betyder klasse = “wpr”?

Bredde, afsnit? WordPress? Whopper ?! Ren HTML-kode skal ikke ligne et trivia-spil.

Brug meningsfulde navne til dine Ids og klasser. De skal være korte, beskrivende og kun repræsentere et koncept. Det gør din HTML klarere og stylingprocessen lettere.

Tror du ikke, det ville være bedre, hvis du navngav din klasse "indpakning" i stedet for "wpr"?

7. Brug Whitespace

Mange mennesker skriver sammenknust kode uden at bruge hvide rum. Resultatet? Det er som at læse en bog uden tegnsætning eller afsnit:

Helvede:

Tabel

Data 1 Data 2
Calcutta Orange
Bedre kode:

Tabel


  
    
    
  
  
    
Data 1 Data 2
Calcutta      Orange   

Brug hvidafstand: indrykk, tomme linjer, linjeskift. Andre mennesker (inklusive dig) skal kunne læse din kode i fremtiden uden at have hovedpine. Det er ok at minimere dine filer for at gøre dem mindre, EFTER du har skrevet ren læselig HTML-kode.

8. Kopier fra det bedste

De bedste kunstnere i verden lærte deres håndværk ved at gentage værket af mennesker, de beundrede. Du kan bruge den samme strategi til at skrive ren HTML-kode (som også er en ganske kreativ proces). Den nemmeste måde at lære, hvordan man skriver smuk ren kode, er enkel: læs smuk ren kode, og gentag den derefter.

”De, der ikke ønsker at efterligne noget, producerer intet. “- Salvador Dalí

Du kan:

  • Udforsk Open Source-projekter. En af grundene til, at de findes, er, så vi alle kan lære og forbedre at se på hinanden job.
  • Læs blogs og artikler, der lærer dig de bedste kodningspraksis.
  • Tag Udemy-udviklerkurser. Vælg dem, der har fantastiske anmeldelser.

Du finder ud af, at der ikke er en endelig rigtig måde at gøre ting på ... men du vil også opdage, at der er en kæmpe forskel mellem ren og rodet HTML-kode.

Og du vil ikke have, at din kode skal ligne et komplet rod, ikke? ;)

*** Kan du lide dette? Giv mig et par klapper, så andre kan opdage denne artikel ***