How to Write Better and More Readable Code

If you work on a small project, you might want or have to do it alone. You are probably coding the front-end and developing the back-end yourself and do not need too much help from other sources. Or if you need one, you are able to adapt and apply it to your code easy.

But when you work on a larger project, you will most probably be part of a team consisting of few members. In this case you will only take care of a part of the development process.

This is why you need to learn how to write better and more readable code when you develop a webpage, an application, or a system. If you made a messy code, you will still be able to understand and read it because you’re the one who it. But if you will have to pass the HTML to someone who will implement an ASP.Net system on it, he will really need to study carefully each line from your code to be able to understand it.

I will put down some basic things for you to be able to improve the way you code. You may not realize, but this is an important step in becoming a complete designer or developer and even providing faster web solutions.

1. Use Indentation

Indenting your code should be something you already know. I started using it the first day I went into coding, but I am also more organized myself so it just felt normal. Keeping the indentation style consistent is a good idea and it works exactly like paragraphs in a text. When you write a text, you need to break it into paragraphs. This way, the eyes will be able to rest and find information easier. It’s the same with indentation in coding.

There are more ways to indent your code, you just do it the way you wish and like. I prefer not to only write everything new on the next line, but also to nest as much as possible when starting a line, if the code I am writing is part of an upper-branch.

If you indent your code carefully, you are less likely to make mistakes, such as forgetting to close a DIV tag.

2. Comment your Actions

Every language allows introducing comments into the code. You can do it the following ways:

• HTML: <!—COMMENT –>
• CSS: /* COMMENT */
• ASP.Net: <&– COMMENT –&>
• JavaScript, PHP: // COMMENT for single line and /* COMMENT */ for more lines

By placing comments into your code, you can easily explain someone else how does the code works. You can also mark places where different values have to be changed. For example, in all the contact forms you can find on the internet, the line where you have to place your e-mail after embedding the form will be commented and visible. This way, even if you are a beginner, you will still be able to use the contact form on your webpage.

In IDE (Integrated Development Environment), a software application that provides facilities for computer programmers and software developers, comments can be added another way. You can add notes to each function and can read the comment when hovering over the respective line.

3. Limit the length of the lines

As I told you earlier, when we read, we break the text into paragraphs so that our eyes can rest. It’s the same with wide text; we try to break it into columns (e.g. look at the magazines). Try to avoid having a wide code line by breaking it into two or more parts. Attributing a DIV a margin, height and width can be written horizontally, but I would rather break it into three different lines, with each attribute on a new line, like in the picture below.

4. Name the IDs Properly

This is a wide known problem. I always have a sketch which I start to design on. My big box containing the whole webpage is always called #wrapper, the text goes in #content, which is part of #maincontent and so on. Everything is well structured and has proper names. It all flows in a logical way and if someone gets into my code for the first time, I bet he can change the attribute of the logo DIV in less than one minute, because I use proper names and placing.

Do not use numbers in your names, it’s confusing sometimes. Instead, try to name the DIVs with placing attributors, such as #column_left, #column_center and #column_right. It’s easier to find everything this way.

5. Alphabetize Attributes in CSS

If you want to find an attribute fast, it’s easier to find it if you know where to look for it. Let’s say you have a DIV with 15 attributes set. If you want to find the z-index, it should not be somewhere in the middle of the whole CSS code. It should be the last one, because it starts with “z”. If you alphabetize your code, it will be easier for you and not only to find a specific attribute.

6. Write the Markup First

When you slice a PSD into a fully functional HTML & CSS webpage, work along the normal steps! Do not create the CSS file until you are done with the markup. Write the whole HTML and when you close the last tag, link a new and clean CSS file to your newly-created HTML file. CSS is worthless if you do not format your HTML right, so do not even think of going into CSS if the HTML does not look as it should. You will only ruin the format and lose a lot of time.

7. Always Validate your Code

If the W3C Validator is not able to perfectly read your code, you have further problems and you are not done yet. Now that the validator is also providing you with solutions for your errors, it’s not a reason for not checking them. You indented your code, alphabetized every attribute and gave properly names to the IDs, why not also make the code easy to read by computers and search engines? In the end it can’t harm you; it will only improve your website’s loading speed.

These are few basic tips for helping you to write better and super readable code, regardless of what kind of developer you are. You can be a front-end designer, a PHP coding-ninja or a great ASP.Net developer, these tips apply to all of you out there. Passing your work to another developer will not be such a difficult process anymore, because he will be able to read the code himself without asking about every line you wrote.