code-standards.html

 
We are following some standard to make our code same on all machine irrespective of different developers working on different machine, editors and with their different opinion for coding (smile).
Help us to make it clean and uniform code base throughout the project.

JS Standards
Variable and Function naming
All name should be CamelCase (start with small case) like `userPassword`
Boolean flag should be start with `is`, `has` etc. It will give notion that it will be true/false or yes/no.
For count or number variable good to use `no`, `count`
Use getter and setters if you are setting some value or getting some value
For array type of variables, use plural like `items`, `pieces`
Define variables in their proper usage scope

Few points for which we can care about:
Avoid global variables
Clean up console messages
Add `TODO` if you foresee any enhancement or changes in the code or in implementation flow
Line should not be more than 120 columns
Give line spacing between logical blocks
Whenever use `loop` like, `while` then test your termination case otherwise it will be an infinite (∞) loop
Use single quotes (' ') for string declairation instead of double quotes (" ") 

CSS/SCSS Standards
Name should be small and hyphenated like `rotating-wheel`, `right-box`, `home-page` 
Try to use mixins to avoid common property declaration
Define all animation related properties individually if we want to support Safari like 
/* for Safari */
  -webkit-animation: 0.7s ease 0s normal none infinite running blink;
  -webkit-animation-name: blink;
  -webkit-animation-duration: 0.7s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-fill-mode: none;
  -webkit-animation-play-state: running;
  
  /* For other browsers */
  animation: 0.7s ease 0s normal none infinite running blink;
 
Nesting of classes should not go beyond 3-4 step. If we need more nesting then change the name of class.
Name should not be more than 18 chars (but optional). We can use some short hand names.
Try to avoid giving class names similar to standard library class names. Like in Bootstrap we have `.btn` class so try to avoid it.
Never use inline css with elements. like `<div style='border: 1px solid #fffff></div>`
Keep your css modular with help of SCSS. It should not goes a 5000 lines of css file otherwise you are not thinking about how to compartmentalized css code.
Use 0 (zero) instead of `none` for border properties.
Don't nest the ID selector in SCSS
 
Formatting
Use soft tabs (2 spaces) for indentation
Prefer dashes over camelCasing in class names.
Underscores and PascalCasing are okay if you are using BEM (see OOCSS and BEM below).
Do not use ID selectors
When using multiple selectors in a rule declaration, give each selector its own line.
Put a space before the opening brace { in rule declarations
In properties, put a space after, but not before, the : character.
Put closing braces } of rule declarations on a new line
Put blank lines between rule declarations



Common mistakes to avoid
Use 0 instead of 0px in css properties
 
 
Further readings
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
https://github.com/airbnb/javascript
https://github.com/airbnb/css