Why I Use a JavaScript Style Guide and Why You Should Too

This article was peer reviewed by Tim Severien. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Let’s take a look at JavaScript Standard Style by @feross, a JavaScript style guide that’s gaining popularity. It may help you reduce friction on teams and increase programmer happiness.

It’s a set of rules to make JavaScript code more consistent and can prevent boring discussion of the merits of tabs over spaces. It’s one of many styles that you can adopt and sits in the same category as other JavaScript linters such as JSLint, JSHint and ESLint.

If you’re not sure what linters are, or why you’d need one, check out our comparison of JavaScript linting tools

The Importance of Style

If you’ve been coding for a while, you’ll no-doubt have a style that you’ve grown to like. This is what happens when you write certain patterns hundreds or thousands of times, you start to find your way of coding aesthetically pleasing. All of a sudden someone else comes along and starts throwing brackets down in odd places and leaves spaces hanging off the end of lines. There may need to be words. Breathe deeply, your placement of brackets or choice of white-space doesn’t make your programs any more correct, it’s personal preference.

Each programming language has a dominant style, sometimes like in the case of Python an official style guide is presented as the correct way to author programs. Hold on, did you say 4 spaces for indentation?

Coding in the dominant style of a language will help your program fit into the language’s ecosystem. You’ll also find it easier to contribute to open source projects and have others contribute to your own if things are familiar and agreed upon at the outset.

JavaScript doesn’t have an official style guide, perhaps a de-facto standard came out of Douglas Crockford’s The Good Parts. His book presented a way to write reliable JavaScript programs and he highlighted features that we should actively avoid. He released JSLint to support these opinions and the other linters followed suit. Most of the linters are highly configurable and let you choose a style that suits you best and better yet, enforce it on others! JavaScript Standard Style is different. The style that you like best is irrelevant, what’s important is that something, anything is chosen that everyone can understand and work with.

Adopting standard style means ranking the importance of code clarity and community conventions higher than personal style. This might not make sense for 100% of projects and development cultures, however open source can be a hostile place for newbies. Setting up clear, automated contributor expectations makes a project healthier.

If you’re writing a program for yourself that no-one else has to contribute to, use the tools and style that make you the happiest. When working on a team you should always aim to reduce friction where possible, be professional and don’t sweat the small stuff.

Take the time to learn the style of the existing code base before introducing your own style.

JavaScript Standard Style

2 spaces – for indentation
Single quotes for strings – except to avoid escaping
No unused variables – this one catches tons of bugs!
No semicolons
Never start a line with (, [, or `
Space after keywords if (condition) { ... }
Space after function name function name (arg) { ... }
Always use === instead of == – but obj == null is allowed to check null || undefined.
Always handle the Node.js err function parameter
Always prefix browser globals with window – except document and navigator are okay
- Prevents accidental use of poorly-named browser globals like open, length, event, and name.

See the complete list of rules

The most controversial rule would undoubtably be No semicolons. It’s been considered best practice for years that semicolons should always be present to avoid bugs, Crockford did a lot to promote this but it also has deep roots in C where the semicolons are strictly required or the program won’t run.

JavaScript Standard Style has changed my mind on this, semicolon free JavaScript is good.

Automatic semi colon insertion is a feature of JavaScript which can reduce noise and simplify programs, I have never run into a bug caused by a lack of semicolons and I don’t believe you will either. See Are Semicolons Necessary in JavaScript? for more on this.

Not everyone agrees, notable forks semistandard and happiness bring back semi-colons with a vengeance. I find these forks a little sad as they seem to miss the entire point of standard.

I disagree with rule X, can you change it?

No. The whole point of standard is to avoid bikeshedding about style. There are lots of debates online about tabs vs. spaces, etc. that will never be resolved. These debates just distract from getting stuff done. At the end of the day you have to ‘just pick something’, and that’s the whole philosophy of standard — its a bunch of sensible ‘just pick something’ opinions. Hopefully, users see the value in that over defending their own opinions.

Personally, I’ve grown to like coding without semicolons, perhaps that’s from time spent writing Ruby, Python and CoffeeScript which require less syntax. Whatever the reason, I find programs clearer when there’s less to look at.

Mark’s Hierarchy of Good Programs

Programmers should value:

Correctness
Readability
Happiness
Efficiency

It turns out that adopting a style guide like standard provides benefits in each of these areas.

Correctness

To be of any use at all programs must do what you intend and be free of bugs. Style doesn’t make programs any more correct but a linter can catch errors before they’re released.

Readability

As a professional developer, beyond providing a working program, the readability of your code is the most important thing. Far more effort is spent reading and trying to understanding programs than it is writing, so optimize for your future self and other humans that will inherit your code.

A clear predictable style makes code easier to read and understand.

Programmer Happiness

One of the things I love most about this is that it places the focus on the human rather than the machine. The only reason it’s third on the list is that the teams need for readable, functioning code should come before our own happiness, it needn’t come at its expense though.

You want to enjoy life, don’t you? If you get your job done quickly and your job is fun, that’s good isn’t it? That’s the purpose of life, partly. Your life is better.

– Yukihiro Matsumoto

Life is too short to get worked up over differences in opinion over personal preference, set a standard and move on. If a standard style can prevent disagreement and friction among the team you’ll be happier for it.

Efficiency

Last on the list, but not least.

If you have to make trade-offs on any of these points, you should value correct, readable code that makes people happy over fast code.

Computers are fast. If the program is efficient enough then it’s fine. If you notice bad performance then spend time finding the bottleneck and making the code more efficient.

Humans are slow. Making things more efficient for us is far more valuable. The clarity that you gain from adopting a standard style makes your code quicker to understand and contribute to. There’s far less time spent disagreeing too, which is most welcome.

Implementing JavaScript Standard Style

You can adopt the standard without any tools, just read through the rules and take note of the ones which are different. Try it out for a week and see if you like it. If you don’t, use it anyway!

There’s also an npm package for linting your JavaScript code.

npm install standard --global

Running standard will run all JavaScript files in the directory through the linter.

Additionally there are text editor plugins for all of the usual suspects, here’s how to install the linter in Atom.

apm install linter
apm install linter-js-standard

Screen shot of the plugin highlighting errors in Atom

Personally I find automatic linting of programs as you type really distracting. If you feel the same you might prefer to use these linters after you’ve finished your work. The standard command also has a flag for automatically fixing certain style errors which might save you some time.

standard --fix

Adopting JavaScript Standard Style

Should you adopt standard style? Well, that’s entirely up to you.

If you have no style guide in place, then be prepared for a clash of opinions.

If you’ve perfected your ideal set of rules and would like to enforce it throughout a code base, then ESLint may be what you are searching for.

If you would rather not waste time over the boring minutia of syntax then take JavaScript Standard Style for a spin and let us know what you think in the comments below.

Frequently Asked Questions about JavaScript Style Guide

Why is it important to use a JavaScript Style Guide?

A JavaScript Style Guide is a set of standards that developers follow when writing JavaScript code. It ensures consistency, readability, and maintainability of the code. When multiple developers work on the same project, it’s crucial that they all follow the same style guide to avoid confusion and make the code easier to understand and debug. It also helps in reducing the possibility of errors and bugs in the code.

How can I set the style of an HTML element using JavaScript?

You can set the style of an HTML element in JavaScript by accessing the style property of the element. For example, if you have an element with the id “myElement”, you can change its background color to red like this:
document.getElementById("myElement").style.backgroundColor = "red";
This will apply the CSS style directly to the element.

What are the common JavaScript Style Guides that developers use?

Some of the most common JavaScript Style Guides used by developers include Airbnb’s JavaScript Style Guide, Google’s JavaScript Style Guide, and StandardJS. These guides provide rules for syntax, formatting, and best practices to ensure that the code is clean, consistent, and easy to read.

How can I enforce a JavaScript Style Guide in my project?

You can enforce a JavaScript Style Guide in your project using a linter like ESLint. A linter is a tool that analyzes your code for potential errors and violations of your style guide. You can configure ESLint to follow the rules of your chosen style guide, and it will alert you when your code violates these rules.

Can I create my own JavaScript Style Guide?

Yes, you can create your own JavaScript Style Guide. However, it’s usually more efficient to use an existing style guide that has been tested and proven by the community. If you have specific needs that aren’t covered by existing style guides, you can create your own rules and add them to your linter configuration.

What is the difference between inline styles and external styles in JavaScript?

Inline styles are applied directly to HTML elements using the style attribute, while external styles are defined in separate CSS files and linked to the HTML document. While inline styles can be convenient for small projects or quick fixes, external styles are generally preferred for larger projects because they promote reusability and separation of concerns.

How can I remove a style from an HTML element using JavaScript?

You can remove a style from an HTML element in JavaScript by setting the style property to an empty string. For example, to remove the background color from an element with the id “myElement”, you would do this:
document.getElementById("myElement").style.backgroundColor = "";
This will remove the inline style from the element.

What are the benefits of using a linter with a JavaScript Style Guide?

Using a linter with a JavaScript Style Guide can help you catch errors and inconsistencies in your code before they become problems. It can also help you write cleaner, more readable code by enforcing best practices and style rules. Additionally, it can save you time by automatically fixing certain types of errors and formatting issues.

How can I apply multiple styles to an HTML element using JavaScript?

You can apply multiple styles to an HTML element in JavaScript by setting multiple style properties. For example, to set the background color and font size of an element with the id “myElement”, you would do this:
var elem = document.getElementById("myElement");
elem.style.backgroundColor = "red";
elem.style.fontSize = "20px";
This will apply both styles to the element.

Can I use JavaScript to style pseudo-elements?

No, JavaScript cannot directly style pseudo-elements like ::before and ::after. These are part of the CSS specification and can only be styled using CSS. However, you can use JavaScript to add or remove classes from elements, and these classes can have associated styles for pseudo-elements in your CSS.