Skip to content

Latest commit

 

History

History
89 lines (69 loc) · 3.21 KB

readme.md

File metadata and controls

89 lines (69 loc) · 3.21 KB
Raw

Coding Guidelines

General Guidelines

  1. All file names for HTML, CSS, JS needs to be in lowercase, use hyphens where necessary
  2. JS Function names need to be in camelCase and should explain what the function is doing.
  3. CSS Class preferably need to be in lower case using hyphens if necessary, but we can live with camelCase too
  4. Striclty follow DRY ( Do not Repeat Yourself). If you find yourself copying and pasting code from one function/class to another, You are doing it WRONG
  5. No 2 functions or classes should have 50% or more similar code

HTML

  1. Keep your DOM as minimal as possible, everything doesn't need to be in a div, eg: you can directly style an <a > tag, there is no need to put that into a div or span tag.
  2. Every HTML page should have one and only one H1 tag
  3. You cannot have H2 or H3 above an H1 tag they need to be sequental
  4. Don't you even dare write inline CSS
  5. Validate your HTMLs using W3C valiator, and get your error count to as minimum as possible.
    6. </ol>

JavaScript / jQuery

  1. ALWAYS Call Libraries like jQuery, bootstrap, Angular from a CDN. Call them from here https://developers.google.com/speed/libraries/devguide
  2. Never EVER EVER write your code directly into a jquery or any other JS library file. This will wipe out the code when you upgrade the library & you'll also get a lot of bad Karma
  3. Do not create global variables, this will lead to memory leaks and browser crashing.
  4. A single Functions cannot have more than 50 lines of code.
  5. Use Switch Cases instead of if else whereever possible.
    6. </ol>

CSS

  1. Follow a Modular Structure for your CSS, refer to SMACSS from Jonathan Snook
  2. Place all the Global CSS classes towards the top of the file clearly commented where it starts and ends or ideally place them in a seperate file
  3. Avoid writing generalized CSS that modifiy DOM or need to iterate through DOM, it causes the pages to load slower.

Bootstrap

  1. Use the Variables.less to define all the variables you'll need
  2. In the Bootstrap.less file, Include only the necessary less files and comment out the ones you dont need.
  3. For wirting custom CSS and Less classes create a file called custom.less and write all your code
  4. Use Mixins to contain all browser prefixes
  5. Use Variables for defineing all the color hex codes
  6. Use the + or - operators to get lighter or darker shade of a color ideal to be used for mouseover effects, shadows, glow effects etc.