David’s Web Development Blog

When you’re just starting with CSS, one of the things you’ll notice emphasized is the pattern of using divs instead of tables.  This is because historically, divs layout replaced table layouts.  But this has also lead to a misconception: that you should rely mostly on divs to present your content.  This overuse of div elements is called “divitus” (think of a disease..  “inflammation of the div”?..  hmm doesn’t have quite the same ring to it…).

This is due to the mistaken understanding that it’s ok to just use div tags around all the content you want to style.  Even professional web developers make this mistake.  But if you care about your code, you shouldn’t make this rookie CSS mistake.

Bob Dylan’s code is scatterbrained

Here’s a live example from Bob Dylan’s website:

So what’s wrong with it?  It works and it looks good, right?  Well, using the same logic, you might as well go back to tables, which work and look good, right?

Actually you will run into problems with this approach.  One of the most obvious problems with the above code is that it’s not friendly to search engines.  If you run a website and care about search engine rankings, you will not want to put your album title in just a div.  Instead you want to wrap it in an <h2> tag, presuming that the above page has multiple albums listed on it.  If the whole page is about that album, then you should wrap it in an <h1> tag.  This tells search engines the relative importance of the text in the tag.  It makes the text stand out for the search engine.

The second big problem is that there’s just an excessive amount of code here.  Whenever possible, you should always cut down on the amount of text, even if it’s the difference between a few bytes.  If you can make it smaller, then make it smaller!  Small improvements add up.

So how exactly do we make it smaller?

Original Code

First, here’s the original page with the tabs tidied up and CSS content removed, leaving just the selectors:

<style>
	.node {}
	.node-teader {}
	.node-type-news {}
	#node-9725 {}
	.image {}
	.text {}
	.inside {}
	.title {}
	.read {}
	.clear {}
</style>

<div class="node node-teaser node-type-news" id="node-9725" onclick="SWFAddress.setValue('/news/9725')" style="cursor: pointer">
	<div class="image">
		<img src="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/thumb_100/images/news/foreveryoung_rogers.jpg" alt="foreveryoung_rogers.jpg" title="Forever Young" class="thumbnail">
	</div>
	<div class="text">
		<div class="inside">
			<div class="title">Forever Young</div>
			<div class="read"><a href="/news/9725">Read the story</a></div>
		</div>
	</div>
	<div class="clear"></div>
</div>

There’s a few things here that are just outright wrong:

• Generally, if there’s only one child element, you probably can combine the parent and the child.  In the above code, this case would apply to <div class=”image”> (parent) and the sole <img> inside it.  This would also apply to <div class=”text”> and <div class=”inside”>
• As mentioned above, <div class=”title”> should probably be replaced by an <h2> or <h3> tag (or <h1> if that title describes the entire page’s content)

Here’s how I would improve the code, while preserving all the necessary CSS selectors:

Revised Code

<style>
    .clearfix {}        /* Used to be its own div */
    .node {}
    .node-teader {}
    .node-type-news {}
    #node-9725 {}
    .node img {}        /* used to be .image */
    h2 {}               /* used to be .title */
    .node a {}          /* used to be .read  */
</style>

<div class="node node-teaser node-type-news clearfix" id="node-9725" onclick="SWFAddress.setValue('/news/9725')" style="cursor: pointer">
    <img src="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/thumb_100/images/news/foreveryoung_rogers.jpg" alt="foreveryoung_rogers.jpg" title="Forever Young"  class="thumbnail" />
    <h2>Forever Young</h2>
    <a href="/news/9725">Read the story</a>
</div>

Notice that I took it one step further and even removed a lot of the class tags.  An epidemic of too many class tags?  What could it be called.  You guessed it - “classitus”.  (web developers aren’t too creative when thinking of programming epidemics, apparently)

In this case I went on the assumption that there will just be one image in our blockof html, so I went with the more generic selector “.node img {}” which in English reads as “all images within an element with a class of ‘node’”.  Now be mindful that if we add a second image that also falls under this criteria, it will be styled the same way.  If we want to style the image an entirely different way, that’s when you want to add a special class for that image: “.node img.special-image {}”.

I used the same assumption on the link.  I saw that there is only one <a> element there, so the only CSS selector we need is “.node a {}”.  And if we want to add a second link with different styling?  No problem - we use the same solution as with the images: “.node a.special-link {}”.

Also notice that the original code was using an old-style clearfix (<div class=”clear”></div>) which required additional HTML.  There’s a newer fix which is solely CSS-based and requires only one CSS selector.  So nowadays it’s handy to create a “clearfix” class in all your CSS stylesheets and add it to elements when necessary.  You’ll notice I’ve added the clearfix class to the div in the revised code (there’s only one div now!).

So there you have it!  We went from 6 divs to only 1, from 9 classes to 4, and along the way our code got more semantic and search-engine friendly!

Related:
CSS Beginner Mistakes: “Divitus”, Absolute Postioning (css-tricks.com)