Front-end Standards

For any moderate to large programming project you will want to set some standards or guide lines. Settings standards assists in readability for collaborative efforts as well as helping when coming back to a project after some time has passed. If you are joining or taking over a project, then adopt the established standards to maintain consistency.

Programming standards can include naming conventions, indentation, white space, organization and methods of inclusion into the overall architecture. It can also include things to avoid.

Most of my front-end programming is done in Vanilla JavaScript, HTML and CSS with some support libraries, such as jQuery. Following are some of the standards I use to make my code easier to follow and maintain:

Naming Conventions

Descriptive names: use longer, descriptive names to clearly identify usage. Exceptions can be made for tight loop counters or small arrow functions.

let myArray = [ 'eggs', 'bread' ]; // bad, non-descriptive name
let shoppingList = [ 'eggs', 'bread' ]; // good, descriptive name

Pascal Case: for named functions

function CalculateSum(a,b) {
  return a + b;
}

Camel Case: for variables and object properties

let camelCaseVariableExample = null;
let camelCaseObjectExample = {
 exampleProperty: 0
};

Lower Case: for CSS style names and HTML attributes.

<div class='boldfont'></div>

Upper Case: for constants

const MAX_LIMIT = 10000;

Function Definitions

I use an object to act as a name space instead of putting my functions at the global (window) scope. This helps with organization and preventing name conflicts.

let myNamespace = {};
let myNamespace.myComponent = function() {
 ...
 return {
   myTask: () => {}
 };
}();

myNamespace.myComponent.myTask();

What are some of the standards you like to use in your projects? Leave in the comments below.