Best Practices: JavaScript, CSS and HTML

Introduction

Here are the best practices of JavaScript, CSS, and HTML.

JavaScript

Choose short and meaningful but readable variable names.
Avoid global variables whenever possible.
Use one global object to encapsulate any global variables you really need.
Always use var to declare your variables.
If you are using any loop like foreach or while with multiple statements then don’t forget to use starting curly brass and ending curly brass. And if you are writing with a single statement then avoid starting and ending curly braces.
Try to use comments if necessary which will help you/others to understand better in later days.
Indent your code so it’s readable.
Use curly braces to define blocks of code.
Comment your code.
Always end your statement with a semicolon.
Always write statements in one line because if you split statement in multiple lines then for each line the compiler places a semicolon at the end of a line which is wrong. So you have to more careful while writing.
If possible then try to use Typescript/ JavaScript++ rather JavaScript because it checks syntaxes at compile time and it supports OOPS features.
Maintain two kinds of JavaScript files,
- Minimized file for production
- JavaScript file for development.
Be aware of automatic semi-colon insertion happens.
Use foreach rather than for loop.
Maintain JavaScript files lightweight, this can be possible for each functionality use different JavaScript file.
Declare variables outside loops.
Reduce DOM operations.
Be aware of duplicate members (member field, member function).
Always place script files reference at the end of the body tag.
Always separate JavaScript code from the HTML file.
Always use === comparison.
Always try to avoid Eval() because it decreases the performance.
Always try to use {} instead of Object() because Object() decreases the performance.
If possible then use shorthand notations.
Use the Switch case instead of too many if-else blocks.
Use anonymous functions instead of naming functions if possible.
Cache your selectors in variables for further use.
Do not mix CSS properties with JavaScript / JQuery instead we can use CSS classes in JavaScript / JQuery.
Before writing any condition with the DOM element, first, check whether the DOM element is defined or not.
JavaScript doesn’t validate for duplicate members (member fields for member functions). Be careful while writing JavaScript members.
Move scripts to the bottom (JavaScript)/ Use different tags when the Head only option.
Standardize JavaScript libraries on a single framework.
De-reference unused objects.
Reduce Global: Namespace.
Use {} Instead of New Object()
Use [] Instead of New Array()
Use local function variables.
Use === Instead of ==
Remove unnecessary whitespace in scripts.
Never Declare Number, String, or Boolean Objects. Declaring these types as objects slow down execution speed, and produces nasty side effects.
While development you can place your JavaScript files in your solution because it is easy to test but in production don’t place your JavaScript files inside the solution rather you place the files in other server and give the relative path in your project, make sure that the JavaScript files content cannot be accessed by End-User. That way you can secure your code. For more information, refer the below link:
- Secure Your CSS And JavaScript Files

CSS

Put style sheets at the top (CSS).
Combine multiple cascading style sheets (CSS) into a single style sheet.
If you want to apply a CSS class to only one HTML control then go with "#controlID", on the other hand, if you want to apply CSS class for multiple controls then go for ".class".
Don't use the "style" attribute on an element to set its style.
Use developer tools in all browsers to understand the behavior of CSS classes which you have applied. Ex. IE developer tool, Fire Bugger etc.
If possible then use bootstrap CSS because it is compatible with mostly with all browsers.
While development you can place your CSS files in your solution because it is easy to test but in production don’t place your CSS file inside the solution rather you place the CSS file in other servers at give the relative path in your project, make sure that the CSS files content cannot be accessed by End-User. That way you can secure your code. For more information, refer the below link:
- Secure Your CSS And JavaScript Files
Whenever we test written CSS classes then we should test in all recommended browsers based on your project need. We have to make sure written CSS classes behaves uniquely in all browsers, in other words, you can say browser compatibility.
Segregate the CSS files for each module or even for each functionality, try to use lightweight which results in easier to maintain.
Use sprites for small images.
Keep your code organized with comments.
Use W3C validators, when you use W3C validators then your code will be more accurate and render better.
Use consistent naming conventions.
Use comments as much as possible to increase readability or better to understand at a later point in time.
Use fewer files.
- Setup dotLess CSS In ASP.NET MVC Project
Remove your CSS files from your application solution and place it in one of your secured servers and read those files dynamically based on your need. For more details, please follow the below link:
- Secure Your CSS And JavaScript Files
Maintain two kinds of CSS files:
- Fewer files for production
- CSS file for development

HTML

Writing code according to conventions is important.
Indent your code properly.
Do not forget the alt attribute for the IMG tag.
Learn about pair and not pair tags.
Add name attribute for inputs in a form.
Maintain unique names for controls.
Follow proper naming conventions.
Use XHTML rather than HTML because if you use XHTML then it will show you the wrong syntax in HTML page.
If possible use single-page applications as it reduces unnecessary round trips.
If possible try to implement functionality at the front end as it increases the performance.
Don’t place any inline script or CSS content on the HTML page rather use separate files.
If possible try to write unit test methods at the client-side. Ex. QUnit test etc.
Use common resource files for validation or error messages instead of hard coding HTML labels.
Maintain common resource files for localization or globalization.
To test your code, always use a web analyzer, developer tool, fiddler, rest console, postmaster, fire bugger, emulator and simulator etc.
We have to look into speed for the web:
- Request time
- Server processing time
- Data transfer time.
- Web request time
- Client processing time
Use the HTTPS2 rather than HTTPS.
Declare your XHTML pages with a DOCTYPE of XHTML1 because XHTML1 is better and faster rendering in the browser.
User the DOCTYPE always.
Use OL, UL, and LI instead of Table if possible.
Use the class property for CSS instead of inline CSS for HTML control.
Consider alternatives to style-related tags: <b> or <i> --> <strong>.
Avoid landing page redirects.
Enable compression.
Leverage browser caching.
Minify resources.
Optimize images.
Optimize CSS Delivery.
Remove render-blocking JavaScript.
Use asynchronous scripts.
Avoid plug-ins.
Use legible font sizes.
Use Bootstrap CSS throughout your application as the Bootstrap CSS is already optimized and it supports in all most all browsers and devices irrespective of the size of devices and type of devices.

Reference

Refer to the below link for a few more best practices.

4 Comments

Join the conversation! Your thoughts help the community grow.

Nilesh Shah6y ago
I suggest, rather than providing only bullet points in this 1 article, you can elaborate all points with examples and make this a multi-part article series.
Kuppurasu Nagaraj10y ago
Nice sharing..
Raja T10y ago
Nice, Thanks for sharing
Ravi Patel10y ago
nice share