Awesome

Coding Style Guidelines

HTML, CSS, JavaScript, Jade & Stylus guidelines.

HTML

• Double-quotes
• Soft-tabs, 2 spaces

<div class="foo">
  <ul>
    <li>Foo
    <li>Bar
    <li>Baz
  </ul>
</div>

CSS

• Soft-tabs, 2 spaces
• Multiple lines
• One selector by line
• One space before {
• One new line after {
• One space after :
• Three chars hexadecimal when possible
• use autoprefixer
• em everywhere

.foo,
.bar,
.baz {
  font-size: 1em;
  color: #369;
}

• BEM

.org-Block
.org-Block--modifier
.org-Block-element
.org-Block-element--modifier
.js-ListenerAction

JavaScript

• Soft-tabs, 2 spaces
• Semicolon-less (One semicolon before new line starting with ( or [ thought)
• Comma-first
• Paragraphs of code to ease legibility
• Comment only if the code is not easily understandable
• Double-quotes
• Capitalized constructor names
• Try not to get over 80 chars/line
• Create the smallest functions possible

function each(fn, context){
  var array = this
    , index = -1
    , length = array.length

  while(++index < length) {
    fn.call(context, array[index], index, array)
  }

  return array
}

function Hash(object){
  var hash = this
    , length
 
  if(!(array instanceof Hash)) {
    return new Hash(object)
  }
  extend(array, object, true)
  length = object.length
  if(object) {
    array.length = length
  }
}

• Self-executing anonymous functions

;(function(window, document){
  // code here
})(this, this.document)

• Use CommonJS module declaration and browserify to build
• Test using tape

Jade

• Soft-tabs, 2 spaces
• Double-quotes

doctype html
html
  head
    meta(charset="utf-8")
    title Foo
  body
    h1 Hello

Stylus

• Soft-tabs, 2 spaces
• Double-quotes
• Use : with one space after
• /.rtl & for reversed language
• unit(em/@font-size, em) for legacy rem

.foo
.bar
.baz 
  @extend .foo
  font-size: 1em
  color: #369