DEV Community

Cover image for 9 Web Development Best Practices for
2021
Ashok Sharma
Ashok Sharma

Posted on

9 Web Development Best Practices for 2021

Web development projects range from highly complex to relatively simple. No matter the complexity of the project you're dealing with, it's inevitable that you'll have to deal with errors and debug your code. Coding standards and best practices make this task a lot easier.

Aside from making debugging easier, following best practices also guarantees cleaner code and reduces unnecessary errors. They’re a part of skills that every developer must possess. Here are 9 best practices that every web developer must follow in 2021.

1. Sort div Tags

It's common to see multiple div tags closing at the bottom of a page. While divs are cleaner than tables, leaving them unsorted only results in a mess that is hard to clean up. Indentation is a good way to organize tag closes.

However, the best way to organize your div tags is to comment on which one you're closing. For example, adding a comment such as <!--#header -- > helps the reader understand which tag you're closing.

2. Use CSS Resets
CSS resets are a common practice in web development, but it's surprising how many beginner developers neglect to do this. The result is cross-browser rendering issues that destroy UX.

A CSS reset removes individual styling from all elements, and this leaves no room for browsers to override your style element with their defaults.

3. Avoid @import
@import was a popular choice for many developers when it came to importing CSS files. Including a stylesheet into another is easy with this directive. Alternatively, CSS files can be included in HTML documents as well.

However, as browsers drop default import support, developers have to find other ways to include external HTML files within the main file. Renaming the external HTML file extension to .shtml and using server-side includes (SSI) within the HTML is the best approach. Note that the file with the SSI command must be named with the shtml extension.

4. Remember Accessibility
The web is becoming a far more inclusive place, and every website should cater to differently-abled people. In the past, developers had to customize and reconfigure every element to make their websites more accessible. One classic example is adding Alt text to all images so that screen readers will understand how to interpret and explain a photo to a screen reader user.

These days, AI-based web accessibility solutions by acessiBe automate the process. Their AI technology scans the site every 24 hours in search of new content that has to be made accessible. The result is full ADA and WCAG compliance and continued support as your website grows.

5. Compress and Optimize Images
Optimizing images for the web is difficult even if you use Photoshop's "save for web" commands. If you aren't worried about your site's bandwidth, then unoptimized images aren't an issue. However, when creating business websites, developers almost always have to keep bandwidth in mind.

Tools like TinyJPG and compressjpeg are excellent free choices that developers can use. Smush it and RIOT are great paid options.

6. Don't Mix CSS With HTML and Javascript
HTML's purpose is to organize web documents by defining headers, footers, and so on. Front-end developers sometimes use deprecated HTML attributes to style elements. However, this often precipitates into developers using the style attribute to insert CSS directly into HTML.

This practice is fine in development or for a quick test, but it's hardly suitable for production. Avoid using the style attribute to insert CSS since this goes squarely against the spirit of CSS. Similarly, inserting Javascript into HTML is poor practice.

Using unobstructed Javascript might seem tedious, but it results in cleaner HTML and better code results.

7. Conditional Commenting
Microsoft has announced the end of support for Internet Explorer which will make this requirement redundant in a few years. However, for now, it still exists and this means developers have to account for web pages being displayed on this obsolete browser.

There are hacks you can use to customize your code, but the problem is that CSS validation fails. Instead, use conditional comments to target particular versions of Internet Explorer.

8. Use Semantic HTML
HTML is a markup language and is used to create structured documents. Developers should use it to denote headings, paragraphs, and other design elements. It's important to use semantic HTML to give your page more meaning.

Semantic tags make your on-page communication clear to browsers and search engines. They allow for increased customization via the use of well-applied CSS.

9. Build and Test in Parallel
Cross-browser rendering is a huge issue every web developer has to account for. Test your code while you're building it instead of rendering it in one browser and adjusting it for others afterward. You'll save time and find it easier to debug any code.

Digital vector created by freepik - www.freepik.com

Top comments (8)

Collapse
 
valeriavg profile image
Valeria

While these suggestions are not wrong, but they are very outdated.
In 2021 these practices are enforced by various tools: linters, bundlers, compilers & etc.
Modern webdev values thought through UX and device compatibility, among other things, that only a developer can do, while routine things like tabbing divs should be offloaded.

Collapse
 
a2d profile image
a2d

Exactly my thoughts. What planet, time or alternate universe is this guy from?

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

I would remove the bit about accessiBe as I am afraid you have bought into all the marketing rubbish and paid reviews etc.

Rather than explain at length I will just say read some of this article or the related articles adrianroselli.com/2020/06/accessib...

It is covered quite comprehensively there.

Or if you don't believe that, just go to neilpatel.com - run an automated accessibility check or your choosing, then activate accessiBe and run it again - the problems increase!

Collapse
 
ash_bergs profile image
Ash

You know, I've never thought of div tag sorting, but seeing it here it's so obvious and clean 😎

Collapse
 
grahamthedev profile image
GrahamTheDev

It shouldn't be unnecessary if you follow point 8 though as you shouldn't need or have div soup anymore. πŸ€”

Collapse
 
fjones profile image
FJones

The example of #header in particular is rather poorly chosen. <header> is a very good and descriptive replacement for ye olde <div id="header">. With complex layouts you'll still end up with div soup, but I would even disagree with the point entirely: browser dev tools render succinctly without comments, and your templating language (especially in JS-heavy environments) should support sufficient encapsulation to make the individual div soups relatively shy of nesting.

Thread Thread
 
ash_bergs profile image
Ash

Your and InHuOfficial's comments are good points! Semantic HTML always wins.

Collapse
 
wajdialkayal profile image
wajdialkayal

Great awesome