CSS: Creating a good starting template.

I am sure most readers will be well aware of what CSS is and have a great knowledge of how it works. So for that reason I will not go into any explanations of how it works, if you are a beginner I encourage you to google for some beginner lessons there are plenty out there. Well if you are of an intermediate level chances are you are not using any sort of starting template, in this article I will explain to you why it is good practice to make use of a starting template and give you ideas on how to create one. Also at the end of the article you can download my example template and have a look.

I personally think the best way to start any sort of coding to have some sort of ‘stamp’ at the top of what the project is, who created the file, when it was last changed etc. Quite often you will be working on more than one project at a time and files have a nasty way of getting muddled (well at least for me anyway heheh). A stamp will help you know exactly what the file is for.

So let’s create a comment with a stamp right at the top of your CSS file:

[CSS filename or purpose]
Project:    Project name
Version:    Version number
Last change:    DD/MM/YYYY [What you last changed]
Assigned to:    Name of web developer

With the above stamp we can see who made the CSS file, for which project, which version the file is (you may have multiple versions of a CSS file to show clients), the date it was last changed, what the last change was and the purpose of the CSS file (For example a master stylesheet of a stylesheet for the menus).

Next I like to comment in a list of colour codes. The main reason is because I am colour blind, but also think about it…looking at the colours of a website you have just made, do you know the values for every colour? Most likely not. It also helps the poor guy who may need to take over from you at a later stage.
So let’s create a comment with a list of colour codes:

[List of colour codes]
Background:    #ffffff (white)
Borders:     #000000 (black)
Elemet:        Colour code and name.

Next I like to make a list of the CSS files contents. This will be a list of your classes elements etc. When structuring your CSS file you should follow this list and also follow good coding principals such as listing the elements as they are found in the HTML or as they are seen in a web browser (So head above body etc.)

So let’s comment that list:

[List of contents]
1. html, body
2. Next element

As you can see that makes a great little reference, we can see what is in the file and pretty much gather what the file is for and the order of its contents.
As you can see from the List of contents the first CSS content of the file is ‘html, body’, I like to do all my setting right in the beginning. This will usually be resetting the padding and margin, specifying spacing and specifying a font family. You may also want to include directly under any browser hacks you are using.

So your first bit of CSS content would look something like this:

html, body
{
margin: 0px;
padding: 0px;

}

That’s that for making a good starting template. Feel free to download the example bellow and make any comments. Thanks for reading!