Workflow: clean code

HTML

Block elementen moeten onder elkaar in HTML-code.

<!-- 😭 slordig -->
<div><p>tekst</p></div>

<!-- 🥳 clean-->
<div>
  <p>tekst</p>
</div>

Inline elementen mogen inline in code weergegeven.

<!-- 😭 slordig -->
<p>beetje tekst
  <a href="...">link</a>
tekst</p>

<!-- 🥳 clean-->
<p>beetje tekst <a href="...">link</a> tekst</p>

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

<!-- 😭 slordig -->
<div>
<p>tekst</p>
</div>

<!-- 🥳 clean-->
<div>
  <p>tekst</p>
</div>

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

<!-- 😭 slordig -->
<div class = "mijn-class"></div>

<!-- 🥳 clean-->
<div class="mijn-class"></div>

Elementen, classes en bestandsnamen hebben best geen hoofdletters.

<!-- 😭 slordig -->
<div class="mijnClass"></div>
<P>mijn paragraaf</P>
<img src="Mijafbeelding.JPG">

<!-- 🥳 clean-->
<div class="mijn-class"></div>
<p>mijn paragraaf</p>
<img src="mijnafbeelding.jpg">

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

<!-- 😭 slordig -->
<ul>
  <li>tekst</li>
  <li>tekst</li>
</ul>
<p>een paragraaf</p>

<!-- 🥳 clean-->
<ul>
  <li>tekst</li>
  <li>tekst</li>
</ul>

<p>een paragraaf</p>

Plaats geen enters in je HTML op doorlopende tekst. In visual studio kan je visueel wel text wrap aanzetten als je graag alle tekst in je editor ziet.

<!-- 😭 slordig -->
<p>Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Vestibulum lorem turpis, 
consectetur nec nisi vitae, venenatis cursus lacus.<p>

<!-- 🥳 clean-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lorem turpis, consectetur nec nisi vitae, venenatis cursus lacus.<p>

Maak enkel klasse namen in het Engels.

<!-- 😭 slordig -->
<div class="contact-informatie">...</div>

<!-- 🥳 clean-->
<div class="contact-information">...</div>

CSS

Er staat een spatie voor de {.

/* 😭 slordig */
p{
  font-size: 1.2rem;
}

/* 🥳 clean */
p {
  font-size: 1.2rem;
}

De } heeft een eigen regel.

/* 😭 slordig */
p {
  font-size: 1.2rem;}

/* 🥳 clean */
p {
  font-size: 1.2rem;
}

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

/* 😭 slordig */
p {
font-size: 1.2rem;color: blue;
}

/* 🥳 clean */
p {
  font-size: 1.2rem;
  color: blue;
}

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

/* 😭 slordig */
p {
  font-size:1.2rem
}

/* 🥳 clean */
p {
  font-size: 1.2rem;
}

Iedere selector krijgt een eigen regel.

/* 😭 slordig */
p, h2 {
  font-size: 1.2rem;
}

/* 🥳 clean */
p, 
h2 {
  font-size: 1.2rem;
}