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
- Interesting Articles #4 » DivitoDesign - Webdesign Blog
- Websites you shouldn’t have missed in May 2008
- Best Design Articles from May 2008
- DON’T MISS: The Best Design Articles from May 2008 | Dalton Trent's Blog
- DON’T MEASURE: The Best Design Articles from May 2008 | Dalton Trent's Blog
- Websites you shouldn’t have missed in May 2008 | Noupe
1
text-indent:-9999px;-> It’s very bad, Google detect this and he thinks that you try to hidden text ….2
“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.”
Technically there are exactly the same amount of HTML tags in both of those scenarios. The reason using a UL or OL is semantic is that it is a “list” of links, thus an ordered or unordered list is correct, semantic use of the markup language.
3
@CssLeak
I didn’t know that, are you sure? There are a lot of sites using this technique for image replacement. Which image replacement technique do you prefer?
@Scott,
With “more appropiate”, I meant “more semantic”. Maybe I wasn’t really clear
But there is a significant loss in the amount of code too.
from: <span class=”menu-item”>Menu Item</span>
to: <li>Menu Item</li>
4
Regarding “classitis”:
I agree that adding a class to everything is overkill and can clutter up a page, but it is sometimes needed when you are targeting things with Javascript.
For example, I am developing a site right now that will use jQuery to do some ajax. This particular site has lots of links that will be ajaxed. To make things easier, all of these links get a class that jQuery targets for adding the event handlers, and an ID. All of the links get a common event handler that determines what to do based on the ID and the original href of the link.
So, in this case a source-view look pretty messy because there are tons of anchors with classes and IDs. But, the Javascript is very consise and more maintainable, which we thought outweighed the HTML clutter.
5
for image replacement, I have recently been using:
h1 span{display: none;
}
Whether or not that is more semantic, I prefer it over pushing something off screen -9999 px.
Rich
6
Those terms you use (divitis & classitis) were first coined by Jeffrey Zeldman, in his book “Designing With Web Standards”.
7
No, robots don’t read CSS.
But better than text-indent is hide text behind the image. With turn-off images user still can read what is it and that’s the point.
8
I can understand that you need to add much classes in your case. But sometimes people don’t realize that targeting elements in jQuery works almost the same as in CSS. If you for example use the code of the example menu from this article the CSS to target the list items is:
#menu li {....In jQuery:
$("#menu li")...So it’s basically the same. A great overview of all CSS selectors and their counterparts in jQuery can be found here: http://docs.jquery.com/Selectors
Thanks for mentioning, I’ve added this to the article
@Rich and Railbot,
There are a lot of techniques for CSS Image replacement. The example I gave was just to illustrate that you can use a h1-tag for your header. There is a really good roundup on CSS tricks showing 9 common techniques for CSS image replacement:
http://css-tricks.com/nine-techniques-for-css-image-replacement/
I like the negative text-indent, for you don’t have to add extra markup, but that’s just my opinion. Choose the technique you like best!
9
Good article! A similar article I wrote.
10
I use the text-indent technique for image replacement too. We dont need to use a span just to hide the text…
Image replacement using negative values isn’t a problem
11
Googlebot *can* read CSS AFAIK. And for that reason, the method that Rich suggests is bad practise as “display:none;” is, from a content point of view, removing the element from the page.
As for whether the H1 should be the name of the site or not is an area of some debate. In every page other than the homepage, should the H1 not be the title of the current page?
12
Google’s stance on hiding text…
13
There is a lot of discussion whether you should use CSS Image Replacement. I don't use it on this website, but I have been using it on other sites and I have no bad experience with it.
But if you really don't want to use image replacement, you could also just change the <div> to a <h1> (or <h2>).
Instead of this:
<div id="header>
<img src="logo.jpg" alt="My site name" />
</div>
Use this:
<h1 id="header>
<img src="logo.jpg" alt="My site name" />
</h1>
Does everyone agree that this is more semantic?