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. 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>

🥺

🥳

Elementen, classes en hoofdletters 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 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 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

Begin een url nooit met een /

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

👎

🤩

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

HTML

🗑️

Clean code - CSS

CSS

Er staat 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

Web Technology - Deel 6 - Clean code

By Evelien Rutsaert

Web Technology - Deel 6 - Clean code

Writing clean HTML and CSS

Web Technology - Deel 6 - Clean code

More from Evelien Rutsaert