Website coders often find themselves working on a variety of web sites, and when starting out, and learning new methods and techniques everyday, the mark-up used can often be messy, random, and inconsistent.

When working with someone else on a project the problem can be even larger, especially when you both have unique ways of doing things, which can cause confusion, drastically increasing project development time.

But how can this be avoided? This article focuses on setting you own standards, creating re-usable snippets of code and web documents, and the benefits of doing so.

Why set your own standards?

These days almost everything is affected by some sort of standard, and all have a common goal; quality.
This also applies to websites, as quality is important to have good, semantic, easy to read mark-up.

The benefits can really be noticed, for instance, if you code a site messy, with elements all over the place with poorly formatted lines, your just going to make it harder for anyone; including yourself, to understand and make changes to what you have written.

And the changes you could make to improve on this don’t have to be too taxing either, indenting your mark-up and choosing consistent class and ID names can really help people to understand your mark-up, and if you ever want to redo or add to it, it won’t take as long to do so.

Formatting your web pages

When setting your own standards for formatting pages just do what ever your comfortable with!
No-one can tell you how to structure your page, so as long as its readable and easy to follow then your on to a winner.
Things to consider include:

• How will you indent your mark-up?
• What ID and class names will you chose?
• How will you style the elements?

By choosing these. and sticking to them, will really help you improve the quality of your pages.
This also applies to your CSS documents, as well as your web page mark-up. In fact it can apply to anything you end up coding, it really will make life easier.

Choosing class and ID names

When choosing names, give them meaning, and keep them consistent.
If making a container div what will you call it? How will you capitalise the names of classes, Camel type? (e.g subContent) with underscores? (e.g sub_content) with capitals first (SUBcontent) What will you use ID’s and classes for, ID’s for main elements?

There is no correct way to choose and format names, so pick what your most comfortable with, but remember:

• Keep them formatted consistently
• Make the names descriptive
• Choose names that describe their function: not their presentation (e.g use mainContent not leftContent, since what would happen if you moved the main contents position? It would be wrong if called leftContent so you would have to recode!)

Indenting and commenting your mark-up

When writing, good indented code and mark-up can really help when revisiting it at a later date, or just reading through it. Take this for example:

<div id="container"><div id="content"><p>I am a poorly formatted and poorly
Indented snippet of HTML!</p>
</div><div id="footer">This code looks <span>nasty!</span></div></div>

<div id="container">
        <div id="content">
                <p>I am a formatted and properly Indented snippet of HTML!</p>
        </div><!--end content-->

        <div id="footer">
                <p>This code looks <span>nice!</span></p>
        </div><!--end footer-->
</div><!--end container-->

If you were reading the above snippets of code, which would you find easier to follow? It only takes a small amount of effort to indent and comment your markup, and as shown, it can really improve readability.

CSS file formating

If you have coded your site well, and semantically, the CSS file will be the main file you edit to make visual changes to your sites theme. Therefore it is imperative you format it so it is clear and easy to read and modify. It is a good idea to always:

• Comment your code
• Indent your file
• Divide it into sections e.g paragraphs, headings, anchors
• Keep any hacks separate

So set your standards, decide how you will write your files and stick to it.
So for me, I always have a quick overview at the top of the file, then I have clearly marked sections with different element types in them. I also use tab to indent, and start { and } on newlines to keep it tidy. Example:

/*---[body / universal]---------------------------------------------------------*/
body
{
        text-align: center;
        background: #36444C url(images/wide_tile.gif) repeat top left;
        color: #333;
        font: 62.5% "trebuchet ms",Verdana,Arial,Helvetica,sans-serif;
        border-top: 4px solid #fff;
}

Making yourself templates to use again and again

As you make more and more sites, you’ll find yourself doing the same things over and over from project to project. Why do everything again? Why not make a template which as all the basics inside it, and then reuse it.

I find this extremely useful, I always have a CSS template handy for example, which contains just the basic structure but with no actual styles.

You can download my blank template here if you wish. (right click > save as)

Going live

So you’ve made your pretty code, and its all ready to go live? Hold on! It may be easy for you to edit now, but, if you want, you could optimise the file size of your files.

You can optimise by removing all white space for a reduction in file size, some tools are available to do this for you. A good one for optimising css is at flumpcakes.co.uk.
Just as an example, my blank style sheet (download-able above) was reduced in size by 82%, quite a difference.

Just remember when you do this:

• Keep a backup
• Watch out if using hacks – comments are removed by the flumpcakes tool.
• Keep a pretty indented version for editing on your machine
• Only optimise when its ready to be deployed

Closing statement

I hope I have outlined a few useful pointers for making your life easier when coding, you may thank me in the future if you ever have to edit your site!

Found this post useful? Why not buy me a coffee!

Related Entries

• Wordpress Snippet #2: Style the login page
• Including CSS & JavaScript in wordpress posts using Custom Fields
• Creating ‘Web 2.0′ Layouts using strips
• Creating an accessible yet sexy search box with CSS
• IE8 has change of heart