George Lucas once said “A movie is never finished, only abandoned.” Luckily for those of us who work in the world of the web, while never finished, web sites and applications don’t have to be abandoned; we can always come back to them and change those areas that we feel need a tweak or two (in the same way Lucas did when he “remastered” the original Star Wars series).

There is a downside to our freedom to tweak however; after months of work on a project it can often be several more months before we come back to the code we have written, which is (in my case at least) just long enough to forget exactly how and why we got the design working the way it does.

Having experienced this many times and having lived through the pain of having to remember what was going on in my code from older projects, I started to use 5 very simple techniques for making my mark up more manageable and easier to come back to:

1) Add a closing comment to divs

At the end of each <div> element in a page I add a comment that includes the id or class name of the element in question for example: <div id="container">foo</div> \<!--container--> This may seem trivial, but it really helps out when the divs fill up with a lot of content and you’re trying to find the end of a section of a page. This also proves useful for when it comes to slicing and dicing a static HTML page into includes.

2) Make a HTML map of the main structural elements

I first saw the 3d CSS Zen Garden diagram a few years ago have been making my own HTML maps for my designs ever since. I don’t bother with the internal elements as shown in Mr Clarke’s example as these change page to page, but mapping out the overall structure like this makes coming back to the design a lot easier.

3) Use logical class and id names that are memorable

This is something everyone should be doing anyway, but unfortunately there are still plenty of coders who don’t. There are still people who will name elements things like “leftCol” which is a bad idea as it explicitly ties the element to the layout and will make no sense if the content in “leftCol” has to sit on the right of the screen in an updated design. But as well as choosing a name that is display independent, the name should be meaningful; “primaryContentContainer” not something like “xl42” (which I have seen in one designer’s code). The more obvious the naming, the easier it is to “relearn” how the structure works (it also makes the HTML maps more readable).

4) Add some meta data to your CSS using comments

At the top of all my style sheets for each project I include a series of comments that tell the reader a bit about the file. They look something like this:
/* fileName.css - description of the site or product this is for, along with any specific styling this file contains (print styles for example)*/ /* Author: Name and email address */ /* Creation date: DD MMMM YYYY */ /* Last edit: DD MMMM YYYY - Name of person making the change */

This is really useful when you have to hand over a design to someone else, but is also useful when you have to revisit a design and there are a number of style sheets that control things. Remembering which does what becomes simpler.

5) Put Internet Explorer CSS hacks in a separate style sheet

Roll on the day when all browsers display CSS in the same way. Until that day IE will always need some help to make it play nice. There are many hacks for common problems out there, but including them all in the main style sheet for a project becomes a maintenance nightmare. Instead use a separate “ieonly.css” file that contains all of the IE specific styling rules. Then include this in your HTML using the IE conditional include. This allows you to collect all the IE only rules in one place and simply remove them by removing the conditional include should we ever reach the mythical day when IE works like the rest of the world.

Do you have any tips for making your mark up more manageable? Share them with us in the comments.