Code Style Guide

General Styles

• Use two space indent (instead of tabs).
• Put brakes { after rule declarations/function name/while/for/etc.
• Put spaces between rule declarations/function name/while/for/etc and brakes {.
• Put spaces after : in property declarations/objects definitions.
• Use double slash // for comments block (instead of /* */) and put spaces after double slash.
• Any , and ; must not have preceding space.

CSS

• Use short hex color codes like #000 unless using rgba().
• Use uppercase letter in hex color codes.
• Define each rule declarations on separate lines.
• Don't nest further than 3 levels deep. (Sass)
• Define positioning properties first, then display and others.
• Use dash - on CSS Class/ID's.
• Use camelCase on keyframes animation names.

Examples

.effeckt-element {
  // Positioning
  position: absolute;
  top: 0;
  left: 0;
  
  // Display
  width: 100%;
  height: 50%;
  margin: 10px 0;
  padding: 10px 20px;

  // Others
  transition: all 0.6s ease;
}

Javascript

• Use Spaces after and before ( and ) and [ and ].
• Use Spaces after and before = assigning values.
• Don't use spaces after unary operators such as ! or ++.
• Use space after , in arguments variable.
• Declaring Objects using multi-line.
• Declaring variables using multi-line.
• When chained methods make long lines, divide each method on mutiple lines.
• Use $ in front of a variable if it's a jquery object.
• Always use semicolons ;.

Examples

// Space on after and before '='
var i = 0;

// Declaring variables using multiline.
var a, b, c,
    foo = true,
    bar = false;

// Space before and after '(' and ')'
if ( condition ) {
  // space after ',' in arguments variable
  doSomething( boo, bar, i );
} else if ( otherCondition ) {
  somethingElse();
} else {
  otherThing();
}

// Don't use spaces after unary operators such as '!' or '++'
while ( !condition ) {
  iterating++;
}

// Space before and after '[' and ']'
for ( ; i < 100; i++ ) {
  object[ array[ i ] ] = someFn( i );
}

// Declaring objects using multiline
var map = {
  ready: 9,
  when: 4,
  "you are": 15
};

// Long chaining methods
elements
  .addClass( "foo" )
  .children()
      .html( "hello" )
  .end()
  .appendTo( "body" );