Coding Best Practices

IN PROGRESS

Standard

1. Every check-in must be validated against responsiveness
2. No console error

Coding

General

1. Avoid unnecessary comments however add proper comments
2. Write DRY
3. No sensitive information disclosure

Naming Convention

1. CSS class name: kebab-case
2. Javascript variable name: pascal-case
3. Constant: upper-case
4. React Component: camel-case
5. File Name: kebab-case

New line practices

1. A new line after every CSS block
2. A new line after

Play Practices

1. Play related CSS should not use any element selector

Javascript

1. Use ES6 scripts
2. Try avoiding console log
3. No use of eval
4. Appropriate variable name
5. Declaration at top
6. Avoid creating variables inside a loop
7. For string concatenation and replacement, use string template literals
8. Reduce globals
9. Use arrow functions
10. Avoid var, use let and const
11. Use inline object instead of new Object()
12. Use [] instead of new Array()
13. Spread operator, use it as much as possible
14. Try non-blocker code, use async
15. Easy to access properties using destructuring

React Practices

1. Try to use CSS per component-based
2. Decompose into smaller components
3. Use functional component
4. Appropriate naming and destructuring Props
5. Member name in camel case
6. Constants in upper case
7. CSS class name in hyphen-case
8. Use propTypes as much as possible
9. Avoid many props
10. Use map rendering for an array
11. Use ternary operator and &&

CSS

1. Avoid inline-style
2. Simple CSS block structure
3. Use Block-Element-Modifier
4. Separation of structure
5. Separation of container and content
6. Make use of variables
7. Add vendor prefix rule: (will use auto prefixer)
8. Use shorthand properties
9. Find and eliminate overwritten and redundant properties
10. Make style responsive
11. Add appropriate comments
12. Try creating top-down structure
13. Try using CSS properties instead of HTML encoder for special characters.

Helpers

1. Linter Config: --link to linter config--
2. Prettier Config: --Link to prettier config--