Are you one of the CSS coders that use <div>-tags for anything and add classes to every element? Learn why it’s wrong to do that and how you can cure your CSS disease.

What are Divitis and Classitis?

The terms Divitis and Classitis were first coined by Jeffrey Zeldman, in his book “Designing With Web Standards” (thanks reader John). There is a pretty good explanation of what it is at Tyssen Design:

‘Divitis’ is a term used to describe an error common amongst newcomers to building CSS-based sites whereby they use too many divs for everything. Divitis is related to ‘classitis’ and ’span mania’, both terms used to describe the practise of combining spans with a class to style content when a more appropriate tag is available

Why is it wrong?

Here are three reasons, why you shouldn’t use too much divs or spans:

• It is not semantic
  Semantic coding, is using an element the way it’s meant to be used. For example: using tables for a design is wrong. Tables are meant for structuring tabular data only.
• It is bad for SEO
  Search engines pay attention to certain elements, like <h#>. If you not specify the content by using a neutral element like <div>, the search engines don’t know whether that content is important.
• It is superfluous
  Using unnecessary tags means more code, more code means a larger file and a larger file means more bandwith use and slower pageloads.

Examples

Header

On a lot of site’s the following code is used for the header of the page:

<div id="header>
<img src="logo.jpg" alt="My site name" />
</div>


But it’s more semantic to use a <h1>-tag like this:

<h1>My site name</h1>

And the following CSS code:

h1 {
background:url(logo.jpg);
text-indent:-9999px; /*(that will remove the text from the page)*/
width:800px;
height:150px;
}

We just changed the <div> into a <h1>. This is good for SEO, for the search engine now sees that header image is the most important part of the page. And it’s more semantic to: the <h1> is meant for the most important header of the page, in this case the site name.

Navigation

I often see divs and spans used for navigation, while using a list is much easier. For example:

HTML:
<div id="menu">
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
</div>

CSS:
#menu {
/* your style*/
}
.menu_item {
/* your style */
}

First of all, there is no need to add a class to the span tags. You can easily target the <span> with CSS without a class. Like this:

HTML:
<div id="menu">
<span>Menu Item</span>
<span>Menu Item</span>
<span>Menu Item</span>
<span>Menu Item</span>
</div>

CSS:
#menu {
/* your style*/
}
#menu span {
/* your style */
}

But it would be more appropriate to use an unordered list (ul). You can see that you can very easily decrease the amount of code you use on your page.

HTML:
<ul id="menu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>

CSS:
#menu {
/* your style*/
}
#menu li {
/* your style */
}

Other elements

The previous examples are very basic, but even advanced CSS users don’t always use the right elements. Do you use <adress> for your contact data? Or <abbr> for you abbrevations?

Conclusion

Divitis, Classitis and over-using of spans are some of the most common CSS mistakes, but they are also easy to cure. Think a bit further that divs and spans and you’re almost there!

Further Reading

• CSS Adjacent Sibling Selector; this CSS selector is not well known but can be used to target some specific elements, and you don’t have to give them a class if you use this CSS selector.
• CSS Creator Divitis: What It Is And How To Cure It
• What is Divitis? – Tyssen Design

• BROWSE / IN TIMELINE
• « CSS coding for cross browser compatibility
• » What do ancient philosophers learn us about blogging?

• BROWSE / IN CSS Featured
• « CSS coding for cross browser compatibility
• » Showcase: Social Media Buttons