How to Reduce Classitis in HTML With CSS Descendant Selectors

Have you heard of classitis? Beginning CSS designers quickly master the ability to create dozens of classes in a CSS stylesheet and to apply them liberally to their HTML documents. Most of these classes are unnecessary and merely clutter up the code and add to the document size. A bigger document size translates to a slower download and increased bandwidth expenses. Cluttered code afflicted with classitis is not good for business; it's not the best practice and it doesn't help achieve the accessibility goal of separating content from presentation. Here is how to reduce classitis using CSS.

Things You'll Need

• A text editor or an HTML editor

Instructions

1. Classes in CSS are not a bad thing. But often classes get added repeatedly when a descendant selector would do the same thing with much less code added to a page.

2. 

   Here's an example of classitis.

3. In the CSS there would be one rule for the ID #leftcol and a second rule for the class .smalltext. Two rules are, indeed, needed in the CSS, but this is the wrong approach.

4. 

   A better solution is a rule for #leftcol and a second rule for the descendent selector #leftcol p. Every paragraph in the "leftcol" div would be styled by the rule and no class attributes would need to be added to the code. With a descendant selector the code would look like this.

5. Using a descendant selector such as #leftcol p has the same effect on the appearance of the paragraphs, but less code has to be downloaded by the user, making the page load faster while still looking exactly as you want.

Tips & Warnings

• Classitis can rear its ugly head in every LI element of a list or in every hyperlink of a menu. Look for an element higher in the page hierarchy, perhaps a UL or a DIV with an ID that might work with a descendant selector instead.