Created
February 21, 2017 06:48
-
-
Save Amitesh/4fcae3a48c40508d820cb5ce8756c04a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment