Warning: You may be coming down with classitis or divitis

And it’s lethal. Yep, it will kill you. Ok, lie numero uno.

What is classitis and divitis?

Classitis is the overuse of the class in your mark up and Divitis is it’s division counterpart. Or more simply put, using class or div when not neccessary.

Huh?

Well, usually after we (developers) learn about CSS, containers, and classes we load up our markup with these “snags” by which for us to “hook” our markup with some CSS. Take a look.

Now look again, this time ignore the fish. In this case, the developer has created a class of “brightred” to snag the CSS as a mechanism for changing the text to bright red I would assume.

Why is this a problem?

This can become a problem when this is done too often, giving us classitis and divitis. These can be problematic because it waters down our markup, making something that’s supposed to hold meaning about our content less important because we are now using our classes and divs to relay presentation. In addition, this is not how it was designed to be used. “So what” you say? “If it works, it works, nuff said.” Ok, let’s switch gears for a second. Basketball. Anyone can play basketball. There’s several ways you can get better at Bball.

1. We could shoot half court shots for an hour.
2. Alternatively, we could visit the foul line, focus on our form, BEEF, run to make ourself tired then shoot more free throws.

Which method would make you a better player? Which player would you rather be on a team with? Which player would you rather put money on? Which method is basing practice on the rules of the game?

The point is web standards is all about a set of guidelines to follow. If we have these guidelines, we should follow them. Otherwise we should just go back 10 years to the pre-standards era.

Semantic HTML

Semantic HTML is the use of the most appropriate HTML elements and attributes for the content we are marking up.Excerpt from Microformats, Empowering Your Markup for Web 2.0 by John Allsopp

I’m a Visual Learner

Ok, so let’s pretend we had a table we wanted to mark up and present. Our finished product is to look something like this:

You can guess which would be my favorite course, but my students may disagree! Now let’s write some code to create this table, but let’s do it as Jeff (that’s me) would have done some time ago, this means using limited CSS and classitis. So our code may look something like this:

Bad Mark Up

1. <table class="schedule">
2. <tr>
3. <td class="gray"><strong>Period</strong><td>
4. <td class="gray"><strong>Teacher</strong><td>
5. <td class="gray"><strong>Course</strong><td>
6. </tr>
7. <tr>
8. <td>1<td>
9. <td>Mrs. Jones<td>
10. <td>Math<td>
11. </tr>
12. ...
13. <tr>
14. <td>7<td>
15. <td>Mrs. Planz<td>
16. <td>Aide<td>
17. </tr>
18. </table>

See how in this I have added a class of “gray” to each of the td tags for the top row and a strong tag inside each. Yep, you guessed it this was to allow a method to make the background of the cell gray and the text bold. I’ve also given my table a class of “schedule” in order to provide a way to separate this table from my other tables on the page. To be completely fair, at this time I probably would have also added width and border attributes freely, but let’s assume there is not presentational markup in here. And to be even more honest, this isn’t really that bad of a case. I’ve seen classitis and divitis used much more freely than this, go check out some of the mark up at CSS Zen Garden, some of it’s atrocious. If you think like I did at this time you might be wondering what’s wrong with this. Well, it’s farse. Unneeded.

Let’s take a look at how it should be done. Convienently, the HTML spec gives us some additional table tags that, to be honest, I had not learned with my first installation of HTML, because of the time at which I learned HTML (over 10 years ago). We have some additional tags we can use here, specifically thead, th, and tbody. Incidently, there is also a tfoot, which in this example we do not need, but know that it is available. Let’s take another look at our table markup and how it could be written.

Good Markup

1. <table>
2. <thead>
3. <tr>
4. <th>Period<th>
5. <th>Teacher<th>
6. <th>Course<th>
7. </tr>
8. </thead>
9. <tbody>
10. <tr>
11. <td>1<td>
12. <td>Mrs. Jones<td>
13. <td>Math<td>
14. </tr>
15. ...
16. <tr>
17. <td>7<td>
18. <td>Mrs. Planz<td>
19. <td>Aide<td>
20. </tr>
21. </tbody>
22. </table>

This is better markup for a couple reasons.

1. It’s cleaner code.
2. It utilizes tags to convey contextual meaning.
3. There’s no fluff.

The Stylesheet

If your reading this article that mean you found my site. If you found my site you probably have an interest in XHTML, CSS, Design, and/or Programming. If you have an interest in that stuff then you probably have a grasp on how to write the CSS for this semantically correct HTML. However, just in case, I’ll show some CSS for this good markup.

1. th{background:#CCC; font-weight:bold;}
2. table thead th{background:#CCC; font-weight:bold;}
3. table thead th{background:#CCC; font-weight:bold;}

Both lines 1 and 2 have the exact same effect. In a real worl attempt you woul;d not write both of those lines, I simply wanted to illustrate that you can pinpoint the markup you want to modify by using descendent selectors. Try to use descendent selectors, it will render cleaner and more meaningful markup.

It’s Hard

Hey Jeff, I’ve reviewed your markup and you don’t always practice what you preach. Yeah, your right! I don’t. I try to, but after a long time of practicing classitis it’s a hard habit to break. I’m working on it though, and with nicorette and group therapy I hope to beat it!

Write better Markup, write semantic HTML