DEV Community

John Warner
John Warner

Posted on

3 1

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.

Image of Bright Data

Global Data Access Unlocked – Reach data across borders without restrictions.

Unlock the power of global data collection with our advanced proxy solutions. Ideal for market research and more.

Unlock Data Now

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.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay