Back

Are you tired of bushwhacking your way through messy code?

Web developers are no strangers to shifting standards and discrepancies. They put a lot of effort into making sure that standards are met, so that a design looks the same in as many browsers and operating systems as possible.

After all that effort, no developer or project manager should be forced to sift through poorly indented HTML and redundant stylesheets to find a tiny little error.

Developing clean coding habits will save you time and money, and make your websites more accessible for future developers and users.

What are clean coding habits?

Clean coding means using the proper code, the least amount of code possible, and following a consistent style of organization. The aim of clean coding habits is to have efficient and readable code. For HTML, that means choosing the most semantic tag; for CSS, no redundant or superfluous rules.

Another major tenet is that style (CSS) and functionality (JavaScript) be separated from content (HTML). Gone are the days when table layouts and inline styles should even enter your thoughts!

When coding a design, use the fewest amount of containers to achieve the desired look. While clean code is desirable, sometimes a design requires the judicious use of extra markup and a balance needs to be found. It isn’t enough to have nice-looking, readable code—it’s important that the code be succinct as well.

Advantages of clean coding habits

1. Less bugs
If there’s less code, you have less chance of creating some weird bug. And it will be easier to find and fix any bugs that do arise. Adding more code or using a WYSIWYG editor as a crutch may seem like a good idea to the inexperienced developer, but it can cause a spaghetti code nightmare and leave you confused and wasting time in the long run.

<!--bad WYSIWYG generated code-->
<br>
            <font face="Verdana"><i><b>
                               
<font color="#393895" size="4">
            <span lang="en-us">Be sure to check
            out </span>
<a href="/store/" target="_top"><font color="#FF0000">Our
Store</font></a></font></b></i></font></p>
            <p>
<font face="Verdana"><font size="1">
<a href="videos/announcement.wmv" target="_top">
Download Announcement</a></font><br>
&amp;amp;nbsp;</font></p>
<!--good clean code-->
<p class="store">
    Be sure to check out <a href="/store/">Our Store</a>
</p>
<p class="announcement">
    <a href="/videos/announcement.wmv">Download Announcement</a>
</p>

2. Easier Edits
Starting with clean code will make it easier for yourself or other developers to go in and edit later. With less code, it will be more obvious what the code is doing what, and where to make any needed changes.

3. Quicker loading times
This may seem unimportant when you think about how large and inexpensive website hosting plans can be, and how fast most people’s internet connections are today, but loading times still matter. The main reason nowadays isn’t to save bandwidth (although it is still of importance for heavy-traffic sites) or to be considerate of people with slower internet, but to rank better in Google results. Page loading time is factored into the ranking algorithm, so keep clean coding habits to save precious bytes.

4. More accessibility
For web surfers using screen readers, HTML tables and forms can get annoying and confusing quickly if they are not cleanly coded. This is one reason why tables are no longer used for layout – they don’t make sense semantically and are less accessible.

<!--a poorly constructed/non-semantic table-->
<table width="90%" border="0" cellpadding="0" cellspacing="0">
 <tr>
   <td background="topleft.png">&nbsp;</td>
   <td width="40">&nbsp;</td>
   <td background="topbox.png">&nbsp;</td>
 </tr>
 <tr>
   <td width="200" valign="top" background="menubackground.png">Menu Here</td>
   <td background="fancydivider.png">&nbsp;</td>
   <td valign="top">Content Here</td>
 </tr>
 <tr>
   <td background="bottomleft.png">&nbsp;</td>
   <td>&nbsp;</td>
   <td background="bottombox.png">&nbsp;</td>
 </tr>
</table>
<!--clean table code, used properly-->
<table summary="Class times and locations">
 <caption>
    Schedule
 </caption>
 <tr>
   <th>Class</th>
   <th>Time</th>
   <th>Room</th>
 </tr>
 <tr>
   <td>JavaScript</td>
   <td>9:00-10:00</td>
   <td>101</td>
 </tr>
 <tr>
   <td>HTML5</td>
   <td>10:00-11:00</td>
   <td>105</td>
 </tr>
</table>

5. Future-proofing
Keep your code well-separated by content, style and functionality and free of hacks to help ensure that your sites will still be supported by browsers in the future. Stay up to date with web standards and avoid the use of ‘hack’ code to achieve certain effects.

6. Device-independent content
The clean coding idea of separation of content from presentation makes it easier to deploy web content across the many devices used to access the web today.

<!--different stylesheets for mobile/screen/print-->
<link rel="stylesheet" media="screen" href="style.css">
<link rel="stylesheet" media="screen and (max-device-width: 480px)"  href="mobile.css">
<link rel="stylesheet" media="print" href="print.css">

7. Sense of craftsmanship
Apart from the logistical benefits, there are higher-level benefits to clean coding. I think developers should get satisfaction from employing clean coding habits. Many things today are mass-produced and low quality, but we have the chance to take pride in our work and make the best output possible.

8. Shows Professionalism
Messy code can betray a lack of training on the part of the developer, or perhaps a lack of respect for the work of coding. Therefore clean coding is part of showing mastery of your skills and being a responsible professional.

9. Saves time and money
If you are a developer, keeping clean coding habits should mean you have a pretty efficient process, so you are saving your own time. If you are not a web developer, maybe you are someone who employs or is looking to hire a web developer. You should care about about clean coding habits too. For the reasons stated above, clean coding habits also lead to less wasted time on projects, which translates to less money wasted and less headaches.

Practice makes perfect

Well, maybe not perfect—no one is perfect—but keep your code clean and as close to perfect as possible. It will save you time and money and your future-self will thank you for it.

[Photo by ?????]

Leave a comment

We'd love to work on your next project

Get in touch