Working Smarter: Standardise your code
In my previous post about keeping a code snippets library I eluded to the fact that within this file structure I had created a number of HTML skeletons which give me a basis for beginning a new project. It removes the medial task of creating a container <div> and the usual suspects of a header region <div id=&quo;header&quo; />, content area <div id=&quo;content&quo; /> and <div id=&quo;footer&quo; />. I tab indent my code for easy scanning too so shaving off the few minutes laying these out correctly along with other items that may get missed within your <head> such as common <meta>. I took my skeletons a bit further by adding in unordered list items for the menu area, aside and footer. These may not all be used but it is quicker to delete than it is to type.
Beginning in this way means I’ll use the same taxonomy for the naming convention of classes and ID’s across multiple projects.
I also work in the same manner for my global CSS document. I keep this stylesheet semantically written and looking very tidy, grouped by the regions within the HTML markup, so, for instance ‘Header’, ‘Content’, ‘Footer’. Within a commented area at the top of the document I detail this structure and other useful document meta data such as the colours used in the design, when I wrote the document and when amendments have been made. Rather than going into too much detail on this I will instead direct you toward Jina Bolton’s extensive post on creating sexy stylesheets.
So how does this help? If you’re working alone then it means that you’ll be standardising your working convention which will help when you return to projects in the future for amendments and updates. You’ll instantly be familiar with the code and its structure. Employ this in an agency environment or within a team of designers and you can pick up each others projects safe in the knowledge that it will be familiar too.
I have been working in this way now for around 2-3 years and I wouldn’t go back. Of course there will be the odd project that breaks convention and has to be structured in a different way in order to make it behave – in these instances try to keep to the usual formatting style as closely as possible and comment your code well for the abnormalities.
Liked this post? Subscribe to my RSS feed to keep up to date on my other posts.
Tags: CSS, HTML, semantics, sexy stylesheets, standardise code, working smarter
This entry was posted on Wednesday, October 14th, 2009 at 7:53 am and is filed under Web design, working smarter. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Loading... 
