What are the code standards and best practices for Front End Development?

Coding Standards for Front End Development

Three pillars of front end development:

  • Semantic HyperText Markup Language (HTML) for structure
  • Cascading Style Sheets (CSS) for presentation
  • JavaScript (JS) for behavior and interaction

General Standards

While we are writing code that must reach a desired goal, must be read and understand by others.

Code Consistency.

Usage of the same patterns is critical between team members so as to never cause confusion.

Indentation

  • Please consistently indent, nest, include braces, quotes, and new lines so that code is clear and can be read easily.
  • New code that is added should never deviate from existing formatting conventions or change the indent levels.
  • For all code languages, we recommend the use soft tabs comprised of four spaces per tab. Hitting the Tab key in your text editor should generate four space characters rather than one tab character. This results in our code appearing identical across platforms.
  • If tab stops are favored by a team, simply maintain consistency for a project and it’s deliverable. so developers can make adjustments to their editing environments a single time.

Readability

  • We encourage liberal use of white-space, comments, and descriptive variable names as appropriate for writing easy-to-read code.
  • The ability for another developer to read a code is essential.
  • No need to think about compressed way of code writing while you developing application, we will use automated server side or other build process to optimize files. This includes concatenating files, code minification, gzipping and more.

Areas of critical consistency include:

  • Code formatting
  • Naming conventions
  • File and folder structure
  • Examples or sample code
  • How page components might be broken down or re-used

Points to remember when lookup the UX designs:

  • Templates and types of pages.
  • Which sections of pages (i.e. components) are reused.
  • Type of Frameworks
  • CSS grid systems (LESS, SASS or Custom).
  • Server-Side delivery platforms.

Performance Caveats

In some cases for performance reasons it may be good practice to in-line critical styles in a style block in the document’s head.

This delivers these styles to the browser in the fastest method possible by preventing the need for an additional HTTP request.

CSS Deliverables

Delivered CSS should be concatenated, minified, tested against browser bugs (e.g. MSIE selector count bugs) and extra files should be removed.

File naming conventions should be consistent and language or use-case specific files should be clear and not be easily confused with the global style CSS.

Our CSS should be concerned the below points:

  • Browser Compatibility
  • Media Queries
  • Accessibility and CSS
  • CSS pre-processors usage
  • Internet Explorer or browser-specific bugs
  • Usage of CSS3 transitions, transforms, and more
  • Vendor prefixes
  • Color Management

Best Practices for Front End Development

Click the respective link for the detail view of best practices.

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *