Combating Classitis with Cascades and Sequential Selectors

Published March 10, 2008 by CSS Newbies.


There is a disease out there in the CSS world. It can afflict anything from the meanest weblog (or the nicest ones too, I suppose) to the greatest of corporate websites. It’s called Classitis, and I’ve encountered it far too often in my professional work. Perhaps you’ve seen it too. It looks a little something like this:

body {
	font-family: Arial; }
h1 {
	font-family: "Times New Roman"; }
h2 {
	font-family: "Times New Roman"; }
p {
	font-family: Arial; }
p.ArialRed {
	font-family: Arial;
	color: red; }
p.ArialRedBig {
	font-family: Arial;
	color: red;
	font-size: 150%; }
ul {
	font-family: Arial; }
ul.ArialRed {
	font-family: Arial;
	color: red; }
strong.redArial {
	font-family: Arial;
	color: red; }

This particular snippet of (completely fictional) horribly afflicted CSS suffers from multiple problems which could all probably be considered symptomatic of Classitis, even when they don’t directly involve classes. I’ll go through the five of the most glaring problems and how to remedy them below.

The Cascading ability of CSS is ignored. Notice how many times the “font-family: Arial;” rule is applied? This is a waste of space, and ignores the fantastic cascading ability of CSS (which I’ve covered elsewhere). Once the appropriate font family had been applied to the body tag (the first rule in our example), all of the additional “Arial” family declarations, because they were identical and were inherited from this first declaration, became redundant.

Simple and identical rules are repeated.
Take a look at the rules for the <h1> and <h2> tags in the example above. They use a different font-family than the body tag, so it’s appropriate that they have a rule making that change. But why repeat the rule twice? With CSS, you’re allowed to list sequential selectors, separated by a comma. Instead of the rule above, we could’ve written this:

h1, h2 {
	font-family: "Times New Roman"; }

Different classes have an identical effect. Consider the rules “ArialRed” and “RedArial” above. They do exactly the same thing, but the designer was in such a hurry, they accidentally created two rules that mirror one another. Always stop and consider when you’re writing your CSS if there’s any way to consolidate your rules. If you have to write the same rules multiple times, the answer is probably “yes.”

Classes are applied to multiple elements. There are two instances of the “ArialRed” class in the example above. One is being applied to a paragraph tag, while the other is being applied to an unordered list. There’s no need for this redundancy. By eliminating the “p” and “ul” portions of the two selectors, those classes can be consolidated into a single instance.

Class names are super long. This is the classic symptom of Classitis from whence the name derives, much like how chicken pox is named after the chicken-shaped virus that causes it (no? Well, you figure it out then). Designers sometimes get in a hurry and start building classes for every possible design difference they encounter. This can most easily be combated by remembering two things:

First, as I’ve mentioned before, elements can have multiple classes. Instead of having a class of “RedBig,” why not break it into two classes? Then you can style elements that need both classes like this:

<p class="red big">
  This text is now red and big.

Second, classes should describe what an element does, not what it looks like. A class of “red” is great when you’re first building a site, but what happens three months down the road when you decide that you want your emphasized text to be blue? A class of “.highlight” or something similar to indicate the text should stand out in some way would have been more appropriate. Of course, even seasoned developers tend to break this rule every once in a while.

So, after we apply all of the advice offered above, what are we left with? Something that looks a little like this:

body {
	font-family: Arial; }
h1, h2 {
	font-family: "Times New Roman"; }
.highlight {
	color: red; }
.shout {
	font-size: 150%; }

Ahh… nice, healthy CSS, without all of the bloating Classitis inevitably causes.

Of course, these are just a few of the pitfalls of redundancy and excess that designers can fall into when developing their CSS. If you can think of others, share them in the comments.

35 Responses

  1. Justin (reply)

    What I always hate seeing is uncombined border styles.

    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;

    Or border styles broken out to specify different colors on different sides, like so:

    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #FFFFFF;
    border-left: 1px solid #000000;

    …when the same thing could be more briefly written as:

    border: 1px solid #fff;
    border-color: #fff #000 #fff #000;

  2. chris Coyier (reply)

    It’s important to think about semantic meaning here too. Consider using something like “callout” for a class name instead of “red”. That has more semantic meaning to the markup so that down the line if you decide to change the color for those elements, you won’t be stuck with a meaningless “red” describing them.

  3. Pingback: Links of Interest - CSS-Tricks

  4. Benjamin Doherty (reply)

    IE6 doesn’t support multiple classes in a single declaration, so while putting two classes in the element works, combining two classes in a single declaration — { text-decoration: underline; }

    — isn’t going to work.

  5. Dave (reply)

    Chris’s comment is spot-on how I feel. I cringe when I see classes like “big” and IDs like “box1″ “box2″ “box3″ instead of IDs “Headlines” “Calendar” “Questions” and a generic “box” class.

  6. Rob Glazebrook (Author) (reply)

    Dave, Chris, I couldn’t agree more. Which is why the paragraph right after that example you’re talking about explains why classes such as “red” and “big” shouldn’t ever be used. :)

  7. Matt Rossi (reply)

    Nice post. I also hate it when, people are “aware” of the cascading, but try to “reset” previously defined styles again because they were just overwritten…

  8. Niels Matthijs (reply)

    Nice post although I don’t really like to use sequential selectors. This can become messy very quickly, and should only be used when the values are meant to be the same, and should stay that way even when (minor) changes are made to the design.

  9. Pingback: Carmine Web #2 » Blog Archive » CSS: tips, tutorial e risorse

  10. Timwi (reply)

    If you’re going to lecture people, maybe you should first make sure that what you’re saying is right and that you’re not contradicting yourself.

    You are trying to advise against different classes that have an identical effect. At the same time, you preach that classes should have a semantic meaning rather than a visual one. You’re contradicting yourself here. Classes with different semantic meanings can pretty damn well have identical visual appearance in any particular layout. Consolidating those into the same class just because they happen to look the same would lose semantic information.

    Your treatise about the “cascading ability of CSS” is misleading. You claim: “Once the appropriate font family had been applied to the body tag […], all of the additional “Arial” family declarations […] became redundant.” This is grossly incorrect. Any element (a table, say) can override the font family, and then everything inside that element would have the new font family. If I want to use the original font on an element somewhere inside the table, I have to apply the body’s font to that element, which according to your logic would be “redundant”.

    No wonder the web is full of bad CSS if people with authoritative-sounding writing skills (like you) spread so much misinformation.

  11. Rob Glazebrook (Author) (reply)

    Timwi, thanks for your very impassioned response. I’ll respond as briefly as possible.

    First, you’re correct in that elements with identical appearance can have different semantic meaning. But in that case, I’d probably suggest if possible and logical that the developer use sequential selectors, i.e. “p, .error-message { whatever; }”. That way, if you decide to make a change further down the road but still want them to be identical, you only have to make the change in one location.

    And regarding the cascading ability of CSS, I’m still not convinced I’m incorrect. If you set a font-family in the body tag, everything inside of that tag will inherit that font-family, unless you specifically state otherwise. The one exception to this rule is if you are working in quirks mode (i.e., without a declared DOCTYPE) — then, for example, tables can override font selections, and you’d have to be more specific. But I’d never recommend anyone work in quirks mode if they could avoid it.

    Maybe I should have specified previously… when writing these tutorials, I’m assuming the following: you’re writing sematic and valid XHTML, you’re building from the ground up (e.g., no nasty font tags to worry about), and you’re not operating in quirks mode.

  12. Pingback: Autodesign » Links of Interest

  13. Pingback: Links of Interest :: FULL clout

  14. Pingback: Links of Interest :: FULL clout

  15. Pingback: Best Of March 2008 | Best of the Month | Smashing Magazine

  16. Pingback: Best Of March 2008 | Best of the Month | Smashing Magazine

  17. Pingback: Best Of March 2008 | Blog

  18. tieTYT (reply)

    Wow, what a great article. You, sir, know the proper way to teach a subject: Start with an example of the wrong way, explain the problems then show us an example of the right way.

  19. Pingback: Best Of March 2008 -

  20. Pingback: Best Of March 2008 -

  21. Pingback: ifoh designs » Blog Archive » Why your site sucks - Web Design That Is Neat.

  22. Pingback: Build an American Flag out of XHTML and CSS - CSSnewbie

  23. Pingback: New to CSS? New to CSSnewbie? Start Here! - CSSnewbie

  24. Pingback: WEB 3.0 » Blog Archive » ¿Así que querías saber (casi todo) de CSS?

  25. Pingback: WEB 3.0 » Blog Archive » ¿Así que querías saber (casi todo) de CSS?

  26. Pingback: Essential Tips for Redesigning your Website | Chris Taylor Design

  27. Pingback: Essential Tips for Redesigning your Website « SixCrayons

  28. Pingback: Welcome to! | joeCochran

  29. AntoxaGray (reply)

    Classitis are not bad actually. This is new trend of 2012 (google SMACSS) and I agree with smacss guy.

    Because oversimplifying css and html makes project much less scaleable and you will have to add many redundant rules to css and it will be confusing. It’s from personal expierence not just theory.

  30. Pingback: Combating Classitis with Cascades and Sequential Selectors – CSSnewbie | Robert Palmer

  31. Dr Dre Beats Solo (reply)

    I don’t even know how I ended up here, but I thought this post was good.
    I don’t know who you are but certainly you are going to a famous blogger if you aren’t already ;)

  32. Cody (reply)

    I’m a system and application programmer and in general hate web design. But when I saw the reference to Classitis I got curious: I wondered if it applied to OOP, too, but it seems it is mostly for web design (or just CSS ?). The reason I was curious is I’m still mostly biased towards top-down/structural/procedural programming. While OO has its uses – and strengths – it also has its weak points.

    The real reason I’m posting, however, is this: that Dr Dre Beats Solo post smells like spam to me. I won’t try to tell you it should be removed, but it really feels like spam to me: I’ve seen similar wording before; the complimenting you on writing style and whatever else, but at the same time they don’t contribute to anything of the discussion AND they typically have a link to a website that is unrelated and trying to profit off something. To confirm my suspicions, I checked the link and you’ll note that the website was shutdown with a court order even, because it was selling counterfeit products.

    Just thought you should know – personally I would remove it but as a mail (and other types of) server administrator, I utterly despise spammers (there is not a strong enough word or words to describe the hate I have for spammers and spam), but it obviously isn’t up to me – do as you will.

    No real remarks on the article (as above, I don’t like web design) aside from the fact that it makes sense, what you’re saying. I take that back, one comment: you’re right, it would be better if you worded it something like:

    “If you set a font-family in the body tag, everything inside of that tag will inherit that font-family, unless you specifically state otherwise.”

    Because it is always best to make the point as specific as possible (this applies to programming too and probably everything in this world).

  33. Rebeca (reply)

    I am curious as to what you csnioder worthwhile additions to this e2€œdiscussione2€9d.Not very much. This particular area (rape/abuse/victim blaming) is one area in which I don’t want to hear a dissenting viewpoint. There is no excuse for blaming a victim in my book. And I don’t want that shit on my blog, either. In most cases I’m willing to host the dissenting point. In this case, I am not.But it is precisely because the issue is so vile that we must discuss it. Like the Holocaust, or Cambodiae2€™s fields, or Saddame2€™s torture chambers.I’m fine with having a discussion on rape under certain circumstances. Like the legal definition and how it is (and is not) applied in actual cases, the way that society views rape and rape victims, and even in some contexts the grey areas of consent and how we as a society and individuals should treat them.However, entertaining victim blaming in any way is like entertaining (to borrow from your first analogy) people who refuse to admit that the Holocaust happened. You can’t have a real discussion based on that kind of rhetoric, and frankly my blog isn’t here to entertain misogynists who want to tell me a thousand and one reasons why a woman was asking for it or how date rape is just sex that the girl regretted.Just once, I would like to see someone respond to this Vox Day bloke on an intellectual level and not an emotional one.Read some of the actual posts on Alas about Nick’s rape story that I linked. They aren’t in direct response to Vox’s post, but they explain very rationally the problems with victim blaming in a rape culture.Personally, I’ve talked about this issue more than I care to and furthermore it’s a highly personal one with a lot of bad feelings attached to it, so I don’t exactly want to go in to analyze and dissect mode, especially since I know that all it would do is attract even more trolls, as rape is apparently a subject that can never be put on the internet without victim blaming posts. If a throwaway post like this can garner such attention even after I went through pains to keep it off people’s radar, well I shudder to think what a full-blown post on the subject would bring with it.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>