The Power of Clean Code

workspace5

The state of your code can say a lot to about the programmer. It speaks volumes about your professionalism, organization, and coding habits. Yet, it is a busy and chaotic world out there, and sometimes bad code just happens. Now, humans aren’t perfect and code isn’t perfect either, but it doesn’t hurt to try. Especially because, there is no doubt that having clean code can pay off when collaborating with others, seeking out future employers, and even working on personal projects.

XKCD

Keeping your code clean during the building and design process can be tricky. Sometimes, it is okay to let your code get a little out of control (within reason). At least this is the way I see it. If you have a burst of inspiration, by all means, go with it and get your ideas out there before they drift away into the abyss of forgotten thoughts. But, at some point you need to wrangle that code back into submission, don’t let it get too out of hand.

Personally, I am a bit of a messy coder when I am in the midst of working. I code until I deplete my creativity reserves. Then I go back and make order out of the chaos. I find it is a very helpful step to regroup your thoughts and renew your focus for what you are trying to accomplish. It also helps you identify redundancies and mistakes you may have made.

How to Keep that Code Clean

It is pretty simple and goes a long way, and here are some easy tips.

Make It Readable!

This is one of the most obvious suggestions. Make sure there is a natural flow to your code. Use spaces when needed to separate sections, indent, and organize in a logical way. For example, when working with CSS keep your sections grouped locally. Keep all your section attributes grouped together, having no order to your stylesheet helps no one.

The Tab Bar Is Your Friend.

Indenting your code can make it exponentially easier to read. I know this was listed above, but I am going to repeat it because that is how important it is. Using the tab bar can help make it easier to visualize the different sections of your code.  For example:

Bad Code

<ul>
     <li><a href="#home">Home</a></li>
 <li><a href="#about">About</a></li>
 <li><a href="#services">Services</a></li>
	     <li><a href="#contact">Contact</a></li>
	</ul>

Good Code

<ul>
     <li><a href="#home">Home</a></li>
     <li><a href="#about">About</a></li>
     <li><a href="#services">Services</a></li>
     <li><a href="#contact">Contact</a></li>
</ul>

Notes, Notes, Notes!

Believe me, I know it is easy to race through your code without using a single note. Sure, “I know where everything” you say, “I will remember.” Well, it may seem like that now, but when you, a prospective employer, or a collaborator looks at your code you want notes to be there. This can seriously cut down on the time it takes to find specific sections and navigate the code.

Make Use of External Files

Keep your CSS and Javascript in external files from your HTML. Style and script code can make your HTML documents bulky and hard to navigate. Keep these in separate external files and link them to your HTML file.

Watch Out for Stray Tags

Most code editors will warn you if there is a stray tag, but it is good practice to keep an eye out for these. Make sure you don’t have an extra <div> tags floating around.

Nest Those Tags Properly

Something that seems obvious, but can be an easy mistake if you are coding quickly. Make sure your tags are nested in the correct order.

Bad Code:

<h1><strong>Text Here</h1></strong>

Good Code:

<h1><strong>Text Here</strong></h1>

Don’t Go Crazy With Class and Id Names

When choosing names for your classes and ids, make sure they are relevant. Choose something obvious and specific and it will save time later and make your code more readable.

Here is an example, if you add a class or id to the section of your website with contact information.

Bad Code:

class="ci" 
id="c"

Good Code:

class="contactInfo" 
id="contactInformation"

Organizing Your Files

Finally keep those files organized! When you are working on a project use folders to organized your different files. For example separate the files by type, like in the example below.

Screen Shot 2014-08-29 at 3.34.43 AM

So Why Bother?

Easier To Revisit Later

The most practical reason is it is much easier to revisit if you have had time away from your code. Instead of having to stumble around and figure out what does what, you can pick up where you left off.

Easier Collaboration

The same goes for collaboration, it is much easier to navigate with clean code. So if you are working with multiple people on a project it will be much easier on the group. Other collaborators will be able to open the code and start working much quicker, without having to decipher what is going on.

It Is Professional.

Simply put. Clean code will show your professionalism to future employers and to anyone who views your code.

Reinforces Your Skills

It is good practice, and it shows you know your stuff. Using good practices to keep your code clean will help keep your skills sharp and make clean coding more natural. 

In Conclusion

Writing and maintaining clean code is an extremely important skill. It keeps your code readable and easy to navigate. It makes it easier for collaborators to understand and view your code. Clean code shows professionalism and reinforces your skills. But most of all, it just looks cleaner! A place for every code and every code in its place.


I would love any feedback, suggestions, or constructive criticism. So feel free to let me know what you think!


Get the next post!

6 Comments

  1. Love the post Danny! Made me go back and look over my project and just re-arrange things around. Thanks for all your help and look forward to the next post.

    Keep It Up !!! :D

    • Hey Jason, that is a good question. I think it is possible to manage both needs, as long as there is an effort to keep the notes/code clear and concise. Rather than elaborating on every detail in your notes, they should be more like road signs to help navigate the code. And thanks for using “DRY – Don’t Repeat Yourself” it is actually new vocab for me. :)

  2. Hey Danielle,

    Great article. Remember these lessons when you move into MVC. The entire reason we love ruby on rails, Django, etc is that they keep our code segmented between the MVC layers. It’s amazing. You’ll also find a lot of use for snippets and if you are following best practices, it’ll be very DRY code. I am excited to see what you make next. I’m for sure subscribing. I’ve just begun work on my blog, so it isn’t open yet.

Leave a Reply to Jason Data Cancel reply

Your email address will not be published. Required fields are marked *