Because I hand code most of the website’s I make from scratch, I generally have a coding best practices I keep to. This helps make the process a lot more easier to follow, it also enables other people to easily pick up and add to what I have created.

NB: This is a general guide and does not cover all aspects of code writing.It also does not take into account the fact you maybe using a CMS or WYSIWYG editor which often do their own thing.

General

Here are some guidelines that you should think about and follow when writing code. It will help with readability and make things a lot easier for others to understand when looking at your code, or for you when have been away from a project for a while.

These guidelines have been taken from the World Wide Web Consortium (W3C) and other writings which aim to lead the web to its full potential.


Proper indentation

Indentation has no bearing on how the page is rendered, but it has a huge effect on the readability of the code. Standard procedure is to indent one tab (or a few spaces) when you are starting a new element that is a child element of the tag above it. Then move back in a tab when you are closing that element.

Confusing Mess
<ul id="bigNav"><li><a href="/home.html">HOME</a></li>
<li><a href="/contact.html">CONTACT US</a></li><li>
<a href="/about.html">ABOUT US</a></li></ul>
<
Clean, easier to read
<ul id="bigNav">
	<li><a href="/home.html">HOME</a></li>
	<li><a href="/contact.html">CONTACT US</a></li>
	<li><a href="/about.html">ABOUT US</a></li>
</ul>


Keep your CSS and JavaScript external

self explanatory do not have JavaScript and CSS inline its best to avoid this unless you are testing the file.


Nest your tags properly

The title of our site, “My Cat Site,” is properly inside Header one tags, which makes perfect sense. And as per the norm, the title is a link to the home page. However, the anchor link, wraps the header tags. Easy mistake. Most browsers will handle it fine, but technically it’s a no-no. An anchor link is an “inline” element, and header tags are “block” elements. Blocks shouldn’t go inside inline elements.

Incorrect
<a href="index.html"></a><h1>My Cat Site</h1><a href="index.html">

Correct
<h1><a href="index.html">My Cat Site</a></h1>

Use better naming conventions

Good class and id names are things like “mainNav,” “subNav,” “sidebar,” “footer,” “metaData,” things that describe the content they contain. Bad class and id names are things that describe the design, like “bigBoldHeader,” “leftSidebar,” and “roundedBox.”


Leave typography to the CSS

If a design specifies that our text should be in all caps, it’s better to use CSS. We can target this text using {text-transform: uppercase}. This means that down the road, if that all-caps look loses its charm, we can make one little change in the CSS to change it to regular lowercase text.


Validate your code

You should run your code through the validator to pick up small mistakes. Sometimes the mistakes will have no bearing on how the page renders, but some mistakes certainly will. Validated code is certain to outlive non-validated code.
Its important to validate when you begin to build your site, but is not 100% necessary as the site grows larger.
http://validator.w3.org/
http://freesitevalidator.com/ – validate entire site


Comment closing div tags

Pages start off small and easy to understand/follow, but after a while of adding bits and pieces the page will naturally grow in size and you often find it harder to follow. You should comment your closing div tags for when you come back to it in the future.

Example of closing div comments
</div><!-- end of inner div -->
</div><!-- end of nested div -->
</div><!-- end of outer div -->

Use shorthand CSS

Using shorthand properties is the single easiest practice you can do to cut down your code (and coding time).

So this
margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
Is the same as this
margin:1em 0 2em 0.5em;

HTML

HTML should be used for structure and content, not styling. Keep all styling in your CSS file(s).