Cleaner HTML by Avoiding ‘Attributitis’

Did I just invent that word? Most developers using CSS layouts have likely heard of “divitis” (using far too many DIVs in your markup). But what about “attributitis” (or, Attribute-itis, if you will) — the distant cousin of divitis? I didn’t bother googling that word to see if anyone else has used it; I’m hoping I’ve coined it! I thought of it this morning while helping a coworker debug a CSS problem. It struck me that the class and ID attributes that are commonly added to HTML tags can really get out of hand if they aren’t controlled properly. Let’s discuss a few points that will ensure cleaner code and better future development time through the practice of avoiding attributitis.

Fewer Attributes Further Enhance Clean Code

Often because we want to easily identify our styles in our stylesheet, when we code an HTML tag, our first instinct is to add a “class” or “id” attribute. At times I do it without thinking. But think of how much cleaner the code would be with no class or ID on that tag? That’s right — just a plain ol’ tag. And when you combine this with the avoidance of divitis, you can easily see the contrast:

With divitis and attributitis…

<div class="my_ul_holder">
  <ul class="my_ul">
    <li class="my_list_item">Example Text<li>
  </ul>
</div>

And Without…

<ul>
  <li>Example Text<li>
</ul>

I realize it’s not always that easy — sometimes you have to apply classes and attributes in order to differentiate. But, to some degree, it can be avoided.

Have Site-Wide Defaults For Commonly Used Tags

By now you should be using a CSS reset to revert all your site’s styles to the bare minimum. If you’re not, do yourself a favor and research the topic and start using a reset. It’s extremely helpful for cross-browser compatibility. But further down in your style sheet, you should have a section of code that contains the site’s custom default styles for various HTML tags like H1, H2, P, UL, and others.

For example, if you know you’re going to have about a dozen unordered lists on the site, styled exactly the same way, there is no need to put class=”my_unordered_list” on every one of them. Just leave the class attribute off completely, and style your UL element to reflect this in your style sheet.

Even if you want to apply a different style to one of them, you can simply do so through the DIV hierarchy that you’ve already likely created in your XHTML. So instead of of adding class="other_unordered_style" to your UL tag, you can leave the UL naked and use something like this in your CSS:

#footer ul {
  /* enter styles here */
}

to declare a different set of styles on the single unordered list that appears in your footer.

Cleaner Markup and Better Site Performance

This will leave your HTML code clean, semantic, and (somewhat) attribute-free. True, this will likely add a few kilobytes to your CSS file. But since CSS is cached by your browser, it will work out better overall for your site’s performance. With a little careful forethought, XHTML and CSS can easily be stripped down to its bare bones — or close to it — and your site will still look as beautiful as it was intended from a visual perspective, and will no doubt be easier to maintain in the future.