Front-End Style and Conventions Guide

This work-in-progress (WIP) is a living document and an attempt to represent the baseline for front-end development

(Contribute: fork, clone, branch, commit, push, pull request.)

Preface

The following documents outline a reasonable style guide and promote proven conventions to common challenges for modern front-end development. The most important take-away is the law of code consistency, the use of best practices and proven conventions. Whatever you chose as the style for your project should be considered law.

Link to this document as a statement of your project's commitment to code consistency, readability and maintainability. Three documents will cover each basic, front-end language every front-end dev needs to know — HTML, CSS and JavaScript.

1. Contributors:

   Current Author:

   • Justin Lowery @cerebralideas, github

   Authors of idiomatic.js (which inspired this collection of guides):

   • Rick Waldron @rwaldron, github
   • Mathias Bynens @mathias, github
   • Schalk Neethling @ossreleasefeed, github
   • Kit Cambridge @kitcambridge, github
   • Raynos github
   • Matias Arriola @MatiasArriola, github
   • Idan Gazit @idangazit, github
   • Leo Balter @leobalter, github
   • Breno Oliveira @garu_rj, github
   • Leo Beto Souza @leobetosouza, github
   • Ryuichi Okumura @okuryu, github
   • EngForDev engfordev - Hwan Min Hong / MinTaek Kwon @leoinsight / Tw Shim @marocchino, github / Nassol Kim @nassol99, github / Juntai Park @rkJun, github / Minkyu Shim / Gangmin Won / Justin Yoo @justinchronicle / Daeyup Lee

2. Global Rules:

   1. All code should look like a single person typed it, no matter how many people contributed.
   2. Write readable, understandable code. Don't code as if you are the only one who needs to understand it.
   3. Don't be afraid to adopt new, modern techniques, i.e. don't do things just because that's how you've always done them
   4. Use proven conventions and techniques
   5. Use the DRY technique as often as possible: the DRY philosophy
   6. Use quality tools, resources & references
      • jsPerf
      • jsFiddle
      • jshint
      • jslint
      • csslint
      • Grunt.js
   7. Collaborate and ask for code reviews, i.e. don't develop in a bubble!
   8. Be awesome and write beautifully clean and inspiring code.

3. Table of Contents

   1. HTML Guide
      • (Waiting to complete version 1.0 of document)
   2. CSS Guide
      • (Waiting to complete version 1.0 of document)
   3. JavaScript Guide
      • (Waiting to complete version 1.0 of document)