The quick and dirty of classitis is that its caused by the abundance of classes, way beyond reason. I know you have all experienced this before. You open the style sheet, to try to figure out how to style the element you just added to the page, and you are confronted with thousands of different classes, all of the flavor

How are you supposed to know which to use? What if what you need isn’t exactly right for your situation? Both problems are caused by classitis.

We want to separate style from structure, so when we are building the HTML to be output to the page, we really don’t want to worry about which particular class goes where. We should a logical structure, identify it based on its purpose, then CSS can take over from there.

For example, we have the HTML as follows

<li>Tab 1</li>
<li>Tab 2</li>
<li>More Tab</li>

with this structure we could be inflicted with classitis and result in the following HTML.

<ul class="mainPageTabsList">
<li class="roundedTab">Tab 1</li>
<li class="roundedTab">Tab 2</li>
<li class="moreRoundedTab roundedTab">More Tab</li>

So in this situation we’ve labeled all the elements with a marker so that we can apply some pre-defined styles to the target element. This doesn’t seem to bad, we have a way to style each element, what more can we ask for? And what if we have another <UL> element set that needs to be styled differently? We really do need some way to style them differently. So what could we have done to avoid this?

<ul id="header">
<li>Tab 1</li>
<li>Tab 2</li>
<li id="headerMore">More Tab</li>

Well you don’t really need all the classes at all, once you’ve identified the list and defined its function, you can specify the styles from there without worry that your styles will leak to other elements, be used improperly (unless someone does it pretty knowingly) or having developers determine which class to apply to the element.

How does the CSS look afflicted and un-affected by classitis? Lets look.

.mainPageTabsList { background-color: wheat; /* One of my favorite colors by the way */ }
.roundedTab { color: navy; }
.moreRoundedTab { background-color: black; }

Not tooo bad, but lets look at the alternative.

#header { background-color: wheat; }
#header LI { color:navy; }
#header LI#headerMore { background-color: black }

Look at that, we’ve got the same amount of lines of CSS, boy do I feel stupid. Yet we ended up less HTML to render, we don’t need to have anyone worry about what styles to add to the <LI> elements when they add them to the list, and we know the CSS applies to strictly header elements, and even more specific the header <LI> elements.

1 comment