standards

Coding Standards 📋

For this project we will be using several different coding languages such as HTML, CSS and Javascript. For each language we try to stick to a set of standards or rules. These coding standards are either enforced by my own discipline and perfectionism, but also with the help of my linter ESLint and formatter Beautify.

General Javascript standards 📕

For JS we use ES6 and kind of follow the same coding standards as MDN. So, when coding we always try to make sure our code is readable and easy to maintain by using expanded syntax. This means we write every line of JS on a new line, for example:

const example = () => {
    console.log(`Hello world!`);
}

and not:

const example = () => { console.log(`Hello world`); }

As seen in the examples above, ES6 uses backticks rather than regular quotations.

However, here are a few other specific rulesets we keep in mind when we am coding:

• No spaces after opening brackets — (element) and not ( element )
• End all statements with a semicolon — ;
• Space between control statement keyword, function, or loop keyword and its opening bracket — if () { ... } or for () { ... }
• Put comments on seperate lines preceding the code they are referring to
• When declaring variables, use const and let
• When declaring vairables, use clear variable names

---

When a function requires extra documentation aim to write comments as followed:

/** 
 * Function name
 * * Description
 * * TODO: optional
 * @params id: explain what it refers to/what is expected
 * @params schema: explain what it refers to/what is expected
*/
const someFunction = (id, schema) => {
    ...
} 

This way of writing comments helps everyone understand what is expected of us whenever said function is called.

General CSS standards 📘

Since we have a lot of CSS, it extremely important for the CSS to be organized and stay consistent. By default, this project has the following CSS reset:

/* =============================================================================
  #RESET
============================================================================= */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0;margin:0 0 1em}


/* =============================================================================
  #TOOLS
============================================================================= */
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }

This CSS reset ensures we do not run into any styling issues because of default CSS from browser. As seen in the example above, we also use block comments to sort of create headings in my CSS. These headings help you to navigate through your CSS.

When creating classes, we aim to stick to the The BEM Naming Convention.

Apart from the rules/guidelines I mentioned before, We should always nest the CSS according to my HTML structure with the tab key and group attributes that are sort of related to each other, for example:

.my-class {
    display: flex;
    flex-direction: row;
    align-items: center;

    width: 100%;
    height: 200px;

    font-size: 12px; font-size: 1.2rem;
    text-align: center;
    color: red;

    background-color: green;
}