Web Design Best Practices, Overdoing your CSS

Over-Doing It

Tagitis

Tagitis is the adding of many useless XHTML tags. This header, for instance, suffers from tagitis:

<h3><em>Header</em></h3>

You don’t need the extra tag. One line of CSS would give the same effect:

h3 {
     font-style: italic;
}

Classitis and Divitis

A common error of beginning CSS coders is to use far too many

div tags and class attributes, like:

<div class="header">
<div class="headerText">
<p class="headerP">
This site uses CSS!
 
</p></div>
</div>

Ninety-nine out of a hundred times these complicated structures are unnecessary. When you start writing CSS you should avoid them, instead of thinking you found the one in hundred exception to the rule. Start with simple XHTML:

<div class="header">
This site uses CSS!
</div>

Use these two CSS selectors:

div.header {
/* styles */
}
div.header p {
/* styles */
}

You’ll find that you can style the entire header by styling these two selectors.