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.

Comments

[Adam Crockett 🌀]

This post means well 👍, If it where me, I would and have brought in an OOTB solution, used the defacto and well known (as far as I can tell) lint standards and tooling defined by AirBnB and eslint, removing the enormous task of managing yet another code standard

[John Warner]

Thank you. I agree. When establishing standards, looking at OOTB examples can be helpful. I highly recommend lint to help maintain formatting and syntax and there are other great tools to help maintain readable code. Thank you for the suggestions.