Frontend Style Guide

Intro

This is an introductory style guide for frontend development: a collection of guidelines and best practices on things like code formatting, naming conventions, good habits and gotchas to avoid. The purpose is most definitely not to define the One True Way of doing things, but to have something that a team can all agree to agree on. It may seem like there is a lot here, but most of it is either just defining what people are already (mostly) doing or is relatively easily implemented with a little mindfulness to make it habit. The goal is ultimately to improve productivity. It is hoped/assumed that a consistent codebase will enhance readability, reduce friction when switching to work on another section of code, and make collaboration easier. Note we do not need to concern ourselves too much with applying these standards "backwards" against existing code, but when refactoring or writing new code, we try to keep them in mind.

TODO

This is still very much a work in progress. Not only are things almost certainly missing (this is roughly what occurred to me off the top of my head, plus some notes cribbed from various sources) but the whole point of a document such as this is to have a starting point to begin discussion and improvement. Please feel to fork and edit.

Note also:

1. Possibly contentious or discussion-required items are marked with a +++.
2. Lots of obvious stuff (eg. that you'd cover in an interview to establish a baseline of familiarity) is left out intentionally.

That said, there are known things that need to be done:

• Add missing info, more details, etc.
• Style/formatting cleanup
• Add proper attributes, links, source material, etc.

Similar projects / References

• HTML5 Boilerplate (source)
• Whichever of http://developer.fellowshipone.com/patterns/code.php or http://na.isobar.com/standards/ came first
• http://taitems.github.com/Front-End-Development-Guidelines/