Please use a common HTML5 polyfill or HTML5 Shiv to enable styling and recognition of HTML5 elements in older devices’ browsers
Always include a proper doctype to trigger standards mode
All markup should be delivered as UTF-8, since it has the best support for internationalization
Should follow the proper naming conventions.
Close your tags, some tags no need close tag like img and br.
Explain which DIV you are closing by proper comments.
IDs vs. Classes
An ID is a unique identifier for that particular element; no other element on the page should use the same ID.
Classes are not unique. The same class can be used on multiple elements within a page, and a single element can have more than one class, in a space delimited list.Anchors and LinksAll links should point to absolute or relative URLs with user-readable content.
Avoid using <br>tags to separate paragraphs or lines of text. Use <p> instead with proper opening and closing elements.
Tables should not be used for page layout; only use them when you need to display tabular data.
Use <table> rather than other elements when displaying multiple records of data.
The <caption> element is the recommended way to describe a table for both sighted and sight-impaired users, though this can also be done less semantically in the normal page text around the table.
Use the <thead> and <tbody> elements to denote which row contains column headers so when a user prints the website and the table runs onto another page, browsers can display the <thead> on each page for easier readability.
Remember to use the scope attribute on the <th> element to indicate whether the header applies to the row or column.
If you are using “float” attribute for more than one DIV Use “clear: both” at the end of parent div close.
Semantic HyperText Markup Language (HTML) for structure
Cascading Style Sheets (CSS) for presentation
While we are writing code that must reach a desired goal, must be read and understand by others.
Usage of the same patterns is critical between team members so as to never cause confusion.
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.
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:
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.
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.
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:
Accessibility and CSS
CSS pre-processors usage
Internet Explorer or browser-specific bugs
Usage of CSS3 transitions, transforms, and more
Best Practices for Front End Development
Click the respective link for the detail view of best practices.
Highlight or styling the Code syntax by using Pygments
Pygments is an open source tool. It is a generic syntax highlighter which is used in many applications like code hosting, wiki for prettify source code. It is supported more than 300 languages and other text formats.