As a new web designer one of the things I was guilty of at first was a condition called “div-itis.” This is a common affliction of even some of the more advanced designers out there – usually in their case because of a lack of time to make the code elegant – but most typically of people who used HTML in the past and now try to bring those skills to bear using XHTML and CSS.
Div-itis’ symptoms include code overrun with unnecessary divs – usually 3 or more levels thick – that simulate – in essence – the old table based code we used to write. This causes – as with tables – higher page weight, lower SEO and a difficulty in updating this code later on down the road – since it is overly and unnecessarily complicated.
Fortunately, this affliction can be cured rather easily. The way I cured it was reading books on CSS – and not just any books will do. I personally recommend books by Eric Meyers and the Zen of CSS Design book. Meyers has several good books but I would start with Eric Meyer on CSS and More Eric Meyer on CSS. One those are complete the book Cascading Style Sheets: The Definitive Guide should become your best friend.
One of the most simple methods these two books relate – and forgive me for not recalling the technical term off the top of my head, feel free to comment with it – is using 2 or more selectors in your CSS to narrow in on the specific XHTML you want to style – rather then wrapping it in a containing div.
For example, say you have a linked list on your page that you want to style different from other linked lists – say because it’s a list of your recent work and you want it to stand out. Instead of wrapping an unnecessary div around the list you want to style and using that as the anchor, you could simply add an id or class – if you’re going to use this more then once – to the ul and then style off of that. Example:
Old (div-itis) rule: div#recent li { some styles }
New rule: ul#recent li {some styles}
Both have the same effect, but one saves you a div. This seems like a small thing, but what if you could save 10 divs on each page. And your website is 100 pages, receives 1,000 visitors a month and the average visitor views 8 pages. Say those 10 divs cost you 1KB. 1KB * 8 pages * 1,000 visitors = 8,000 KB of saved bandwidth. 7-8MB of bandwidth might not seem like much, but on a commercial site where each page it might save 2-3KB and receive 100,000 visitors – it can add up quickly.
On a recent site I did you can see some more examples of this. I used a total of 4 divs, if I’m not mistaken, to layout the template. Then styled off of those. It’s a simple site, so you’ll be able to see how it works rather quickly. The site can be found here and this is the style sheet that goes with it.
Random Tidbit: Don’t think you need to make your site accessible? Check out this article about a recent lawsuit against Target.