How to Clean Up Sloppy Code

Coding is the quintessential tool of the web developer.

Instead of a paintbrush, he uses keystrokes. Instead of poetic stanzas, she uses JavaScript. Instead of… well, you get the idea.

Like the many different habits of the artistic types, developers have their own habits when it comes to coding. And unfortunately, some of those coding habits are better than others.

But we know what you’re thinking: If you’re the only one who will be looking at your code, is it really that big of a deal if things get a little sloppy?

Kind of…

Don’t miss: Clean Code Checklist for Developers

Why Clean Code Matters

learn-to-code-free-online

Steve Jobs, late founder of Apple, had a reputation as a stickler for quality. He once infamously told Walter Isaacson, “For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through.”

That same principle applies to having clean code.

Others Will Probably Need to Use It

You can’t have a “no one will ever see it” attitude, and that’s mostly because you’re probably not the only one who will be looking at your code.

In his book, Clean Code: A Handbook of Agile Software Craftsmanship, Robert C. Martin notes that the ratio of reading code to writing code is 10:1, meaning that the time it takes someone to write code is far less than the time it takes someone to read it.

Even if you’re not working with a team of other developers, at some point, someone else will need to read your code. If it’s confusing or unclear, it can make the job that much more difficult for them (or alternatively you, should you need to revisit something later on).

But that’s not the only problem messy coding habits can cause.

Sloppy Code Can Lead to Security Concerns

Plenty of non-commerce businesses assume that their websites are safe from cyber attackers because there’s nothing of value for attackers to access. They think, “We don’t have credit cards on file, so who would hack us?”

The reality is that most hackers aren’t actually after big dollars. The most common hacker is actually a simple spammer, and their goal is singular: they want access to your code so they can track email subscribers or other users that they can later spam.

One of the easiest ways to do this is to embed malicious links or specific lines of code (especially at the end of a .php file) that trigger certain actions. If your code is already messy, you may not catch these little “extras” and they can cause major problems down the road.

So while you might think that sloppy code only affects you, it can actually create plenty of additional problems, from slightly annoying other developers all the way to creating a genuine gap in security.

That’s why it’s important to follow coding best practices whenever possible. Here are a few things to do when you’re coding to keep things nice and tidy.

Clean Code Best Practices

A house is only as strong as its foundation, so the best thing you can do for your coding habits is to go back to the basics.

Use Strict DOCTYPE. It doesn’t really matter if you use HTML or XHTML, but you should (most preferably) use Strict DOCTYPE instead of Transitional.

Use proper indentation. Sure, it may not be as time effective to do things “the right way” but it saves plenty of headaches for yourself and others later on. Readability is key, so even if you’ve invented your own way of doing things, keep it consistent and make sure it’s understandable should you need to pass the code off to others.

img-cleancode-02

List your character set before your title. In the <head> section, make sure your <meta> is listed before your <title> so that browsers can read the content properly (and other developers don’t have to search for it to make changes).

Keep your CSS and JavaScript out of your <head> section. Putting CSS or JS into your header muddies your markup and also limits functionality.

Don’t copy and paste code. If you have a snippet of code that does one thing and you want to do it again with a different set of variables, don’t just copy and paste. Make a function or use a method instead. While copy and paste seems like a faster solution, it can make lines harder to read and may not always paste properly. Plus, functions and methods actually save more time in the long run.

Don’t mix coding language. Using inline CSS and JS mixed together can cause problems with style properties later on, especially if you’re using a CMS like WordPress or Joomla to upload the code into a theme.

Write explanatory comments. Explanatory comments can do wonders for messy code, especially if you’re including unusual elements or structures for a reason, so do include them. Just remember that you don’t need to explain everything. Basically, use, but don’t abuse.

img-cleancode-03

Nest your tags. Your anchor links (href=) should be inside your header tags, not floating about wherever they please. Think of your anchors like having a pet: If it accidentally finds its way outside, most it’ll probably be fine, but it’s could also be hit by a car. As in, most browsers will probably still read it, but you could run into readability issues on mobile or less advanced browsers. Optimal ordering is key.

Eliminate unnecessary elements. We’re thinking divs. You just don’t need all of those divs. Unless they serve a specific function, dump them.

Name your classes and ids consistently. Good class and id names include “mainNav,” “subNav,” “sidebar,” “footer,” “metaData.”

Don’t use all caps in a markup. That’s why CSS exists.

Capitalize SQL special words. Even though SQL names are case insensitive, you should still capitalize them to set them apart from table and column names.

Organize your files and folders. Keeping things organized by type and function not only helps you find something quicker when you need it, but it helps others who might need access to those files later on.

Final Thoughts

While some habits can be hard to break, it’s worth it in the long run to learn how to keep your code clean. If you follow these best practices as you go, you’ll save plenty of energy for yourself and anyone who reads your code later on.

Remember that ultimately no one is going to tell you how to code. After all, that’s what your clients pay you to do (so they don’t have to). So it’s up to you to make sure things are up to standard and, as Steve Jobs says, you sleep well at night because of it.

Be sure to check out our Clean Code Checklist for Developers
Posted in Advice, Blog, Courses, Tips and tagged , , .

Leave a Reply