Coding standards

Om ervoor te zorgen dat code die je schrijft overzichtelijk blijft is het belangrijk om een bepaalde coding standaard voor jezelf te bepalen. Deze guidelines zorgen ervoor dat je code leesbaar blijft.

Elk bedrijf heeft tevens ook zijn eigen coding standards/preferences, waarbij het belangrijk is dat alle developers dezelfde code standards gebruiken zodat het samenwerken makkelijker maakt.

De grootste voordelen van coding standards zijn in het kort:

• Je code is makkelijker te lezen.
• Je code is makkelijker te begrijpen.
• Je code is makkelijker te onderhouden.

Mijn coding standards

CSS/SCSS/SASS

Om te beginnen zet ik meestal het volgende bovenaan de stylesheet om alle margins en paddings etc. te resetten.

*,
*::after,
*::before {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

Ook heb ik SASS/SCSS gebruikt om variables aan te maken wat ervoor zorgt dat de code overzichtelijk blijft en tegelijkertijd kan je snel de styling van de hele applicatie aanpassen:

// colors
$main-color: #6168F3;
$main-color-dark: darken(#6168F3, 20%);
$btn-primary-hover: #2d328f;
$btn-secondary-hover: #828ba5;
$validate-color: #63d64c;
$warning-color: #8b0000;
$input-border-color: #B8C0D7;
$input-bg-color: #F4F6FC;
$black-color: black;
$white: white;
$light-color: #ECF0FB;
$light-color-dark: darken(#ECF0FB, 20%);
$errorpage-bg: #2C3338;
$bg-icons: #D5DCF0;

Ook heb ik SASS/SCSS gebruikt om mijn code te nesten wat bijdraagt aan het sneller typen van mijn code. Dit ziet eruit als volgt:

section {
  background-color: #000000;

  article { 
    padding: 2em;

    div{
      margin: 1em;

      p{
        font-family: 'Poppins', sans-serif;
        color: #fff;
        font-size: 1em;
      }
    }
  }
}

Comments

Vaak gebruik ik comments om zo mijn code leesbaarder te maken voor andere mensen die mijn code willen lezen. Vaak deel ik mijn normale CSS op een gedeeltes die ik onderscheid met het volgende:

/* *******************************************
**************** MID SECTION 1 ***************
******************************************* */

Tijdens dit blok heb ik dit echter weinig gedaan omdat ik SASS/SCSS heb gebruikt en hiermee mijn SCSS bestanden heb ingedeeld, wat het nog overzichtelijker heeft gemaakt dan wat ik hierboven heb beschreven.

Ook heb ik comments gebruikt om bij complexere code te beschrijven wat ik heb getypt zodat het makkelijk leesbaar blijft:

// Adding a class to a form so it slides in when user clicks on the edit button
const openButton = document.querySelector('#open-btn');
const closeButton = document.querySelector('#close-btn');
const editForm = document.querySelector('#editform');

// adding the classlist
openButton.addEventListener('click', (event) => {
	editForm.classList.add('.editOpen')
} );
					
// removing the classlist
closeButton.addEventListener('click', (event) => {
	editForm.classList.remove('.editOpen')
});

Prettier

Ook gebruik ik Prettier om mijn code te formatten. Hierdoor kan je gemakkelijk overzicht aan brengen in de code en blijft de leesbaarheid goed.

Duidelijke namen

Ook vind ik het belangrijk om waardevolle/duidelijke namen aan classes, id's en variabalen te geven zodat er later geen verwarring ontstaat over waar de naam nou precies voor staat of waar het voor bedoeld is. Door hier op te letten maak je het veel makkelijker voor jezelf en ook tijdens het teamgedeelte voor je team.