DEV Community

John Warner
John Warner

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Pascal Case: for named functions

function CalculateSum(a,b) {
  return a + b;
}
Enter fullscreen mode Exit fullscreen mode

Camel Case: for variables and object properties

let camelCaseVariableExample = null;
let camelCaseObjectExample = {
 exampleProperty: 0
};
Enter fullscreen mode Exit fullscreen mode

Lower Case: for CSS style names and HTML attributes.

<div class='boldfont'></div>
Enter fullscreen mode Exit fullscreen mode

Upper Case: for constants

const MAX_LIMIT = 10000;
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
adam_cyclones profile image
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

Collapse
 
johnwarner profile image
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.