8 Best Practices om schone HTML-code te schrijven

Heb je ooit naar je HTML gekeken en je afgevraagd ...

Schrijf ik goede code ?!

Ziet het er professioneel uit? Doe ik dingen goed? Is dit hoe schone HTML-code eruit ziet?

Die vragen hebben is normaal en goed, vooral als je geen rommelige, door elkaar gegooide, slordige, spaghetti-code wilt schrijven die eruit ziet als:

Het schrijven van schone code zou een van je grootste zorgen moeten zijn, omdat de meeste webpagina's worden gepresenteerd via HTML. U wilt de fundamenten van uw site niet verknoeien. Het is gewoon verkeerd en beschamend.

Hier vindt u 8 geweldige praktijken om die twijfels te vergeten en schone, correcte HTML te schrijven die indruk zal maken op iedereen die deze leest.

1. Geef een f ** k

Ernstig. Het belangrijkste dat je nodig hebt om goede code te schrijven, is je verlangen om dingen goed te doen. Het schrijven van schone HTML-code is eenvoudig, maar u moet goed opletten en veel aandacht besteden.

"Schone code is een code die is geschreven door iemand die zich druk maakt" - Michael Feathers

Uw code weerspiegelt het soort ontwikkelaar dat u bent. Je kunt zien of iemand gepassioneerd is door coderen of dat hij geen f ** k geeft, gewoon door een paar regels van zijn HTML-code te lezen. Het is geen toeval dat luie onprofessionele mensen degenen zijn die slechte en ongeorganiseerde code schrijven.

2. Inspringen

Ingesprongen code is gemakkelijker te lezen, gemakkelijker te begrijpen, gemakkelijker te wijzigen en gemakkelijker te onderhouden. Kijk maar eens hoe moeilijk het is om de ouder-kindrelaties tussen elementen te begrijpen wanneer de code niet correct is ingesprongen:

Onjuiste HTML-code:
  
 
 
Betere HTML-code:
  
    
      

Hoeveel spaties moet je gebruiken voor inspringen? Veel mensen zeggen 4 spaties, vele anderen zeggen 2 en bijna iedereen heeft een hekel aan tabbladen.

Mijn advies? Denk er niet te veel over na, het is niet echt belangrijk om een ​​specifieke ruimtewaarde te gebruiken. Wat er echt toe doet, is ...

3. Wees gewoon consistent

Het schrijven van schone HTML-code gaat niet altijd over het kiezen van goede praktijken en het vermijden van slechte. Vaak kunt u verschillende benaderingen gebruiken om dezelfde coderegel te schrijven.

Bijvoorbeeld:

  • U kunt streepjes of onderstrepingstekens gebruiken voor id's en klassen
  • U kunt een enkel aanhalingsteken of een dubbel aanhalingsteken gebruiken
  • U kunt inspringen met 2 of 4 spaties

Wees gewoon consistent. Wanneer je een specifieke oefening vindt die je leuk vindt, houd je eraan en gebruik het overal. Inconsistentie maakt uw code extreem verwarrend voor u en voor de arme ziel die deze moet lezen.

4. Roei "Divitis" uit

"Divitis" is een grappige naam voor een veel voorkomend probleem in HTML. We gebruiken div's vaak te veel, vooral omdat we alle elementen voor styling in CSS willen verpakken en richten. Dan krijgen we een eeuwige lijst met divs die volledig onnodig zijn:

Onjuiste HTML-code:
  
Headline
  
Ondertitel
  
Inhoud posten
  
    
          
  • Element 1
  •       
  • Element 2
  •        
Betere HTML-code:
  

Headline   

Ondertitel   

Inhoud posten

  
        
  • Element 1
  •     
  • Element 2
  •   

Net zoals schrijvers hun concept vaak tijdens het schrijfproces bewerken, moet u uw HTML voortdurend wijzigen of herschrijven. Verminder het aantal divs en ruim uw code op door alle onnodige elementen te verwijderen.

5. Vermijd opmerkingen

HTML is geen programmeertaal, opmerkingen zijn niet nodig, omdat HTML-opmaak voor zichzelf spreekt. Als u merkt dat u vaak HTML-commentaar geeft, moet u de referentie voor HTML-elementen raadplegen.

"Reageer niet op slechte code. Herschrijf het. ”- Brian W. Kernighan

Uw code is niet eenvoudiger te begrijpen alleen omdat u overal opmerkingen toevoegt. Je kunt ze gebruiken om dingen een beetje duidelijker te maken (bijvoorbeeld om te laten zien dat je een div sluit na veel regels code). Maar geef geen commentaar op dingen die voor de hand liggen of code die slecht is geschreven.

6. Klasse = "clear-name"

Wat betekent class = "wpr"?

Breedte Alinea? WordPress? Kanjer?! Schone HTML-code moet er niet uitzien als een trivia-spel.

Gebruik betekenisvolle namen voor uw id's en klassen. Ze moeten kort, beschrijvend zijn en slechts één concept vertegenwoordigen. Het maakt uw HTML duidelijker en het stijlproces eenvoudiger.

Denk je niet dat het beter zou zijn als je je klas "wrapper" noemt in plaats van "wpr"?

7. Gebruik witruimte

Veel mensen schrijven samen ingeslagen code zonder witte spaties te gebruiken. Het resultaat? Het is alsof je een boek leest zonder interpunctie of paragrafen:

Hel:

Tabel

Data 1 Data 2
Calcutta Orange
Betere code:

Table


  
    
    
  
  
    
Gegevens 1 Gegevens 2
Calcutta      Orange   

Gebruik witruimte: inspringen, lege regels, regeleinden. Andere mensen (inclusief u) zouden in de toekomst uw code moeten kunnen lezen zonder hoofdpijn te hebben. Het is prima om uw bestanden te verkleinen om ze kleiner te maken NADAT u schone leesbare HTML-code hebt geschreven.

8. Kopieer van het beste

De beste artiesten ter wereld leerden hun vak door het werk van mensen die ze bewonderden te repliceren. U kunt dezelfde strategie gebruiken om schone HTML-code te schrijven (wat ook een behoorlijk creatief proces is). De eenvoudigste manier om te leren hoe u mooie schone code kunt schrijven, is eenvoudig: lees mooie schone code en repliceer deze.

“Degenen die niets willen imiteren, produceren niets. “- Salvador Dalí

Jij kan:

  • Verken Open Source-projecten. Een van de redenen waarom ze bestaan, is dat we allemaal kunnen leren en beter kunnen kijken naar elkaars baan.
  • Lees blogs en artikelen die u de beste coderingsmethoden leren.
  • Volg Udemy Developer Cursussen. Kies degenen die geweldige beoordelingen hebben.

Je zult zien dat er geen definitieve juiste manier is om dingen te doen ... maar je zult ook ontdekken dat er een ENORM verschil is tussen schone en rommelige HTML-code.

En je wilt niet dat je code eruit ziet als een complete puinhoop, toch? ;)

*** Vond je dit leuk? Geef me een paar klappen zodat anderen dit artikel kunnen ontdekken ***