Frontend Friday: Watch out for Divitis

Back when I first started using CSS, my favorite tag was undoubtedly the <div>. It was so versatile, and I did everything I could with that tag. It introduced me to absolute positioning and the CSS in general, and I’m forever grateful, but it also brought me away from the basics: HTML as a markup language. It’s also known as divitis: that is, having one too many <div> tags.

The result was code bloat, and once I started weaning away from this practice, I had hundreds of files to update, as they all looked like:

<div class="content">
<div class="title">Some heading!</div>
<div class="date">July 4, 2008</div>
<p>This is some of the content of the page. Yay!</p>
<div class="subtitle">Some subheading</div>
</div>

(I’m sure if you look hard enough you’ll find a couple of my older sites still sporting this sort of markup.)

Movements and events like the annual CSS Naked Day woke me (and hopefully a few others) to the sad truth that as web developers and designers, we can be so obsessive about needing every single pixel in place, but completely forget about keeping the house clean. The impact may be minimal at the onset (i.e., “hey, everyone sees the pretty decors after all!”) but just like your house after a rush cleaning because people are coming over tonight, you have to deal with guests stumbling into hidden mess, things not in the right place, and a painful cleanup job afterward.

(Of course, there’s the other end of the spectrum where holy wars are raged between the use of a <ul> and a <table> tag, which is just as bad, IMO.)

There are three things I do when working on a website to help me keep as close to “clean” as possible:

  1. Keep markup in the back of your mind when creating your design. The best example of this is creating a navigation menu. Can it be done in lists? What sort of arcane CSS-fu is needed to make it work like so?
  2. Start with a bare HTML page. I’m doing this right now for a couple of projects. I have wireframes (structures) where I’ve laid out roughly where things are going, but nothing else. No colors, no images, no JavaScript, just plain ol’ markup-py goodness.
  3. Once done, remove stylesheets and take a look. It’s easy for me to lose track of things when I’m on a roll, so this one personally has made me cringe a lot of times. Temporarily removing all styles from my work is a good way to see if it’s still readable and navigable even without all my pretty styles, and that it’s as close to how I designed it as possible. (This pretty much destroys all unordered lists masquerading as tables… so beware.)

Remember: there are 91 HTML tags available, one of which might serve the need and communicate your intent better. But don’t force it: sometimes saying nothing at all is better than being misunderstood.

Next Page »