avoid CSS Classitis

Classitis is a term used to describe the over use of class definitions in HTML. The immediately benefits of reducing classitis is less HTML & CSS code, faster loading time and much easier to restyle a site.

Avoiding Classitis will also make a site theme much more portable; can be apply to other sites easily. That was the purpose of sitekin to create cross site theme.
For example

Wrong one

Correct one

The use of Div ID is just for an example in this special article, only to make them unique. Regarding when to use ID and when to use Class, please refer to our CSS convention guide.

Below I will try to give an example, explaining why we should try to avoid Classitis

Supposed you have two sections on your site, one is news, the other one is article. When you want to make a difference between two list items. For example, news has red color and article has yellow color. Some people might do it this way

This looks ok if you are never going to change your site. Supposed one day you decide that you want to make news yellow color and article blue color. You have to change the HTML code and create one more CSS class called ".blue". You are sure you need to change at least both Css file and HTML file. We only have one color property which looks like easier, but in real situation we will have much more than just one property.

First, you are sure that you need to do twice work to change. Second, writing CSS in this way make the CSS stick to the HTML code, you can not separated them and apply a new theme.

The better should looks like below, I changed the name of CSS class just for to debug. Use of number in classs name is not advised.

Now you can re-style your site easily and the CSS looks like independent from HTML code.