How to Reduce Classitis in HTML With CSS Descendant Selectors

Contributor

By Virginia DeBolt
eHow Contributing Writer

Article Rating:

(3 Ratings)

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.

How to Make a Block Element With CSS
As CSS becomes a driving force is new web page design, many are discovering how the language makes coding … More
How to Validate CSS Pages
So you've learned CSS and created style sheets to replace bulky HTML code. Something's not quite right and… More
How to Make an Inline Element With CSS
As CSS becomes a driving force in new web page design, many are discovering how the language makes coding … More
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 classe… More
How to Style a Link with CSS
Web page hyperlinks have many properties you can style. You can change color, underlining, background and … More
How to Style a Table with CSS
Use CSS to make your data table attractive and easy to understand.… More
How to Understand the CSS Box Model
Every element on a web page generates a rectangular box. This is often referred to as the box model. The w… More
How to Style a Heading with CSS
Give your headings some snap and pop with CSS styles.… More
How to Design My Web Site With CSS
Web design has come a long way in the past few years, and the good old standby of tables is no longer the … More
How to Style a List with CSS
Use lists to make quick points, number steps in order, or create a menu for your site.… More

Difficulty: Moderately Easy

Instructions

Things You'll Need:

A text editor or an HTML editor

Step 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.
Step 2

Code with classitis

Here's an example of classitis.
Step 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.
Step 4

Clean code

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.
Step 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.