How to improve code readability

Dear friends, now let's talk about what techniques to use in their work on the code to make it easy to read and look more professional. I also like most developers do not work on the project alone, and I work as a team. I have to work hard code HTML , CSS and JQUERY , and I try to do all of this code more professional . I understand that the team is my code but me can use other developers, as well as those who will continue to support the project or to develop it. I myself often have to view other people's code, and sometimes this code can be very difficult to understand. When a developer does not seek to write your code correctly, it complicates the lives of not only themselves but others. After some time to understand the code, it is difficult even to him. Of course, this does not mean that the code is not effective or wrong. No. But in order to understand how it works sometimes need to spend a lot of time. We all somehow feel a catastrophic shortage of time, but it should not be a reason for writing bad code.

I am sure that the client should receive the site is not only well done visually, but with a well-read and correct the code. In the future, it make life easier for other developers. So, let's see what can be done for it.

A. Separate HTML, CSS and Javascript

I think this is one of the important points which need not be neglected. There are still a lot of developers who use the code CSS code directly inside HTML . Perhaps it saves them time, but eventually turns into a nightmare in the future to the people who will not modify or supplement this code. Here, of course, the best way is to dress code CSS and Javascript code from the HTML , put them in separate files and use the links to them in the document.

Two. Use the indentation

By making indents in the code, you greatly increase your code readability, the code is easy to read due to the fact that you are, how-to logically define blocks of code with the same indentation. For example, if you work out the title, it is better to make the internal code is indented. This immediately identify the interface and the internal code will be clearly visible.

You can indent if you write the code yourself, or use the auto indent, which is almost all editors.Even if part of the project has already been done without the padding, you can always use free tools to automatically format text.

Three. Comment code.

Cultivate the habit of commenting code. Comments significantly improve code readability.Sometimes even a couple of lines of code helps you quickly understand. I usually write an explanation for Javascript . For the CSS and HTML , I use them as markers to indicate the beginning and end of the section.

4. Do semantic HTML

Semantic HTML means that instead of having to always use a div or span , you should use the standard HTML tags for their intended purpose. Each tag must fulfill the purpose for which it was created. : Write instead div or span you should ipolzovat tags like:
Use H1, H2, H3, H4, H5, H6 for headings instead of div or span ;
Use LABEL as a label to the fields for input instead of div or span ;
Use a UL for navigation links list, category list and other lists instead of div or span ;

Using existing tags saves time and is more concise and clearer than the div or span with long names of the classes (which always have to come up with).
Five. Assign meaningful Class and ID.

Sometimes referred to as classes and IDs completely senseless way. The names of the classes is difficult to determine the meaning of the container itself. Maybe someone is strange, but I use this method:
hdrXXXXX - the title
lblXXXXX - the label
txtXXXXX - textbox

This makes CSS a little more meaningful. You can use and its method of naming the main thing that was a way of naming the same within the project. It also greatly improves readability.
6. Perform validation code.

Validity of a check code for compliance. Use the service to check the W3C Markup Validation Service . Validation is a very useful and necessary for a finding of oiibok in the code. Very often it happens that the developer forgets to add slash or close a tag. In all validation errors are displayed, and it will be easy to fix. I recommend also to validate before you fix the bugs for versions of Internet Explorer.



7. Organize your files

Place the files in different folders according to functionality. It is much easier to navigate the folder structure than in a pile of files. You'll quickly find files. Better to spend a little time to create folders and sort files on these folders than to confuse a large list of files.



Eight. Do not forget about IE.

There are a lot of articles telling how to use CSS hacks for IE . Okay, but my point of view - better than they really are not used . To properly make a fixation under IE, you need to create conditional tags and prepare a variety of styles CSS for IE6 , IE7 and IE8 . This is the most stable way because microsoft may at any time to fix the problem for which you are using a hack, and you do not know when it happened and it happened at all.

<!--[if IE 6]>
<script type="text/javascript" src="pngfix.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css" />
<![endif]-->    

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie7.css" />
<![endif]-->

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie8.css" />
<![endif]-->

Conclusion

I hope this article will help you improve your code and make it more professional. If you have any interesting ideas that you wash to share them with me!