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 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 semi colon.
- 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 light weight, 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 html file.
- Always use === comparison.
- Always try to avoid Eval() because it is decreases the performance.
- Always try to use {} instead of Object() because Object() decreases the performance.
- If possible then use short hand notations.
- Use 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 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 differ tag when Head only option.
- Standardize JavaScript libraries on 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, slows 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:
CSS
- Put style sheets at the top (CSS).
- Combine multiple cascading style sheets (CSS) into a single style sheet.
- If you want to apply 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 "style" attribute on an element to set its style.
- Use developer tool in all browsers to understand the behaviour 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 server 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:
- 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 light weight which results 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 of time.
- Use fewer files.
- Remove your CSS files from your application solution and place it in one of your secured server and read those files dynamically based on your need. For more details, please follow the below link:
- Maintain two kinds of CSS files:
- LESS files for production
- CSS file for development
HTML
- Writing code according to conventions is important.
- Indent your code properly.
- Do not forget alt attribute for 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 front end as it increases the performance.
- Don’t place any inline script or CSS content in HTML page rather use separate files.
- If possible try to write unit test methods at client side. Ex. QUnit test etc.
- Use common resource file 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 web analyser, developer tool, fiddler, rest console, post master, 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 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 size of devices and type of devices.
Reference: Refer to the the below link for a few more best practices.