Writing Readable Code

Some simple tips for writing more readable code.

Code readability is key when working on software development. It makes it significantly easier for other developers, or even yourself, to look through code and find what you’re after or be able to navigate it without seeing it in action.

Even though this is a standard towards software programming it still applies to web programming. Writing readable code is an essential skill when working with a team of developers. If you adhere to a single style it’ll be much easier to develop faster and collaborate on code.

I’ve gathered a few techniques and tips that I believe help write readable code. Whether you are a new developer or an old one everyone should be focusing on readability and everyone has something to learn in the field.

Order Your Code

The basic structure of your code does come down to a style standard that you decide to follow. But my main advice to someone looking to have readable structure would be to have nesting and order that makes sense.

For example which makes more sense?

    <div id="header"></div>
    <div id="navigation"></div>
    <div id="content"></div>
    <div id="footer"></div>

    <div id="content"></div>
    <div id="footer"></div>
    <div id="header"></div>
    <div id="navigation"></div>

I am a firm believer in having everything fall into a linear path as you write your code. Work top down, don’t have yourself running all over the place.

Properly Indent Your Code

This is something that can fall into personal preference but the big thing that must be emphasized is that it MUST exist. Too many times will I look at code that has been generated by other people and none of the organization of the indenting makes sense. If something contains another element, that other element should be one indentation past the containing element.

Meaningful Names

The next key step is having names that make sense for what they are doing. If the name makes sense to you, but no one else than it is no good. It has to be meaningful to everyone, at least to developers.

For example which makes more sense?

    #header, #navigation, #content, #footer

    #bigPart, #buttons, #text, #btmStuff

The top portion is obviously easier to understand what each components purpose is. This also segways into our next readability step.

Name Styling

There are two major name styles to follow. Each have their upsides and each have their legacy in software programming. If you utilize a name with multiple words in it for example nav and footer there are two ways to name the component. Either nav_footer or navFooter. Now I’m not going to try and push one style or the other on anyone, but what you must follow is a consistent style. If you choose the underscore method it should appear throughout the code. Or if you choose to uppercase the first letter than that must appear throughout. If you change between styles throughout your code it’s hard to follow.