15
May
07

Divitis and Classitis: Two new words in my CSS vocabulary!

Yes, “divitis” and “classitis” are the two latest words that I have added to my CSS vocabulary. But unlike normal language words, these two are added to make sure that I never use them, or atleast minimize their use.

So, what do they mean? Divitis is when someone uses unnecessry <div> tags in their markups. For example:

<div id=”menu”>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</div>

The above example has unnecessary div element. Instead, it could have been easily done as:

<ul id=”menu”>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

Likewise, classitis is the over use of the class attribute. For example:

<p class=”address”>
Ahsanul Bari<br />
House-17, Road-3/A, Sector-5<br />
Uttara, Dhaka-1230<br />
</p>

In the above example, we could easily use the <address> tag instead of using the class=”address” like:

<address>
Ahsanul Bari<br />
House-17, Road-3/A, Sector-5, <br />
Uttara, Dhaka-1230<br />
</address>

The above two examples are really simple, but I hope you got the point. Avoiding divitis and classitis helps to write mark-ups, that are more semantically correct.


4 Responses to “Divitis and Classitis: Two new words in my CSS vocabulary!”


  1. 1 Tijs 6 July, 2007 at 2:40 am

    The address tag is about to become irrelevant when html 5 and/or xhtml 2 arrive though. i think you would be better off using the hCard microformat instead. A lot of div’s but an accepted standard by now.

  2. 2 Matt Foster 1 August, 2007 at 12:26 pm

    I love it and its so true, if you look at “objects” created by Backbase their DOM structure is 100% divs with very specific classes. Like Tijs said you’d be better off using a microformat, but why not distinguish elements by their tagname rather than an attribute.

  3. 3 Michael 11 October, 2007 at 3:13 am

    I know your using a wordpress template, but it pays to look at the markup on a site that your writing articles like this on. People may not take you seriously if they read this, then look at your code.

  4. 4 MisterPerson 20 June, 2008 at 3:28 am

    LOL, Michael has a point!

Leave a Reply