Equal Design are Web Design in Lancashire

I have been coding websites now since late 2004, and I have learnt a lot in the time that I have been doing this.  In fact every day you learn things that you didn’t know, and a long the way I have learnt so much from others.  However the one thing that no one passed on to me was the importance of clean coding.  This is something that I had to learn for myself.  So what do I mean by clean coding and how does it help when creating a website?

Many beginners often use Web Editor programs such as Adobe Dreamweaver to create their websites, however as time has gone I have found it easier and easier to code the sites using a code editor rather than a WYSYWYG solution.  It is only then do you start to appreciate the need to clean code.

When completing a complex website you can end up with hundreds of lines of code for each of the template files that you are using. This is particularly the case if you are using Conditional Tags (which come in very handy when coding a WordPress site), where you need to enter code for each condition that you have on the page.  With this in mind is becomes essential that we create clean code so that we can easily read it when we may want to come back to it and edit it.  Take a look at the examples below:

Unclean Code

In the code above you can see that there are no line spaces between blocks of code, which can cause confusion when reading it, as to which part of code does what.  Also the tabbing of the code is irregular and does not follow a neat pattern.

Clean Code

This example of clean code has line breaks between blocks of code and also elements that are within another element are tabbed to show they belong to the containing element.

My Clean Coding Rules

If you are writing code that sits inside another elements then always use the tab key before writing the code so that you know the code sits inside an element.  Therefore instead of this:

<div class="box">
<p>This is a paragraph inside the box div.</p>
</div>

You would write this:

<div class="box">
    <p>This is a paragraph inside the box div.</p>
</div>

Also spacing is important. Purists would tell you otherwise, but I always find it easiest to leave a line between different elements so the code above would look like this:

<div class="box">

    <p>This is a paragraph inside the box div.</p>

</div>

Hopefully you can see that the code above is much clearer and easier to understand.  The final thing that I recommend when coding sites is that you place comments within your code so that you know what a specific piece of code does.  When you come back to view code in 6 – 12 months time it is not always as clear what certain code does as when you wrote it, and therefore it is important to comment the code to inform you of its function which can save you lots of time.

Depending on the code you are writing depends of how you comment it.  For example if you are writing in HTML I always comment closing ‘div’ tags so I know which closing tag belongs to what.  For example:

<div>

    <p>This is a paragraph inside the box div.</p>

</div><!-- // box -->

This makes it clear that the box div is closed. When you have lots of code on the same page you can’t always see the closing ‘div’ on the same screen and therefore this really helps.  If you are coding PHP you could comment like this:

<?php if(is_category(4) ) { ?>
// checks to see if you are in category ID 4

    <p>You are in category 4</p>

<?php } ?>

The two forward slashes inside the PHP tags indicate that you are quoting and this should be ignored when building the page. Again this is very handy when using conditional statements in PHP.

These simple things are the rules that I try to adopt when creating websites and they have served me well over the years and saved me lots of time.  It will be interesting to see what tips other web developer have.