Clean code

Clean code - HTML

HTML

Block elementen moeten onder elkaar in HTML-code

<div><p>beetje tekst</p></div>
<div>
  <p>Beetje tekst</p>
</div>

😭

🥳

HTML

Inline elementen mogen inline in code weergegeven worden

<p>beetje tekst 
  <a href="...">link</a> 
tekst</p>
<p>beetje tekst <a href="...">link</a> tekst</p>

😭

🥳

HTML

Geneste elementen moeten correct geïndenteerd worden met 2 spaces of 1 tab

<div>
<p>HTML</p>
</div>
<div>
  <p>HTML</p>
</div>

😭

🥳

HTML

Het "=" mag geen spatie krijgen in het attribuut van een element

<div class = "mijn-class"></div>
<div class ="mijn-class"></div>
<div class="mijn-class"></div>

🥺

🥳

Mappen, bestandsnamen, tags en classes hebben best geen hoofdletters.

<div class="mijnClass"></div>
<P>mijn paragraaf</P>
<img src="Mijnafbeelding.JPG">
<div class="mijn-class"></div>
<p>mijn paragraaf</p>
<img src="mijnafbeelding.jpg">

🥺

🤩

HTML

Plaats een lege lijn, na een element die andere elementen bevat

<ul>
  <li>tekst<li>
  <li>tekst<li>
</ul>
<p>een paragraaf</p>
<ul>
  <li>tekst<li>
  <li>tekst<li>
</ul>

<p>een paragraaf</p>

👎

🤩

HTML

Plaats zelf geen enters in je HTML op doorlopende tekst.

<p>Lorem Ipsum dolor sit amet Lorem 
Ipsum dolor sit amet Lorem Ipsum dolor 
sit amet Lorem Ipsum dolor sit amet
Lorem Ipsum dolor sit amet Lorem Ipsum
dolor sit amet Lorem Ipsum dolor sit 
amet</p>

👎

🤩

<p>Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet Lorem Ipsum dolor sit amet </p>

HTML

In visual studio kan je visueel wel text wrap aanzetten als je graag alle tekst in je editor ziet. Ook formatters plaatsen je tekst onder elkaar.

🤓 Tip

Begin een url nooit met een /

<img src="/url-to-myfile.jpg" alt="">

👎

🤩

<img src="url-to-myfile.jpg" alt="">

HTML

Gebruik enkel Engelse classnames

<div class="contact-informatie">...</div>

👎

🤩

<div class="contact-information">...</div>

HTML

Clean code - CSS

CSS

Plaats een spatie voor de {.

p{
  font-size: 1.2rem;
}
p {
  font-size: 1.2rem;
}

😕

🥳

De } heeft een eigen regel.

p {
  font-size: 1.2rem;}
p {
  font-size: 1.2rem;
}

😕

🥳

CSS

Declarations staan onder elkaar en krijgen 1 indentation (2 spaces of 1 tab).

p {
font-size: 1.2rem; color: red;
}
p {
  font-size: 1.2rem;
  color: red;
}

😕

🥳

CSS

Iedere selector krijgt een eigen regel.

p, h2 {
  color: blue;
}
p,
h2 {
  color: blue;
}

🧐

🕺

CSS

Er staat altijd een spatie na de : van de declaratie, en een declaratie eindigt met ;

h2 {
  color:blue
}
h2 {
  color: blue;
}

🧐

🕺

CSS

Code formatten

Code formatten

= De snelste weg naar propere code

Rechtermuisknop > format document

Formatter extensies

Formatten je code automatisch wanneer je savet

  • De eerste keer na installatie moet nog eens manueel formatten via rechtermuisknop > format document
  • Daarna vraagt VS code welke formatter je wil gebruiken, dan kan je prettier aanduiden. Hierna verloopt het automatisch bij elke save.

🤓 Tip

Zoek in je instellingen naar "format on save" en vink dit aan

Formatter extensies

Deze extentie toont je ook wanneer je een fout hebt staan in je code, bijv. een tag die niet gesloten werd of een dubbele tag

10. Clean Code

By Lecturer GDM

10. Clean Code

Writing clean HTML and CSS

  • 122

More from Lecturer GDM