Class Presentation

Eric Meyer’s post Class Presentation has started an interesting discussion on how to keep class names non-presentational.

As an example Eric mentions class names for images, something I took some time to think about while preparing for the recent redesign of this site. I used to have class names like bordered and padded, which didn’t feel quite right.

I’m not so sure what I replaced them with is a whole lot better, but at least I started thinking about it. I use flow for images that are supposed to let text flow around them, and fullwidth for those images that should not. Since I want only some images to have a decoration (border and padding) I use an additional class name, dec (as in “decorated”), for those images.

Perfect? Probably not. Less presentational than bordered and padded? I think so.

Posted on April 6, 2005 in CSS, Quicklinks


  1. April 7, 2005 by Mahmoud

    For me, it is very hard to give a perfect name for a class. There is no standards, no convention. I see that people use masthead, footer etc. for id but other than that everybody uses something different for their class names.

    When I try to name my classes, I ask myself “if I have to change the CSS property of a class in the future, will the class name lose its meaning?” If my answer is YES, I don’t use that class name.

    In your example border or decorated, the element might not be special or visual or decorated or your image might not have a border in the future.

  2. Isn’t CSS meant to be about presentation? Certainly, one ought to use the naming scheme one likes best, but other than that, is there a point in a “standard” on the matter?

    Why would any visitor, or even crawler, care that I named one of my classes “gabriel”? It’s not an id, after all.

  3. When I name classes, I usually come up with some practical stuff. For example, I just recently did this for a project:

    [div id=”error” class=”true”]
    [div id=”error” class=”false”]

    and then in the css I did

    error.true { display:block; color#F00; }
    error.false { display:none; }

    This way, I could use javascript to just “turn on” the error message block and fill the placeholder with error messaging.

  4. Since border or no border is a presentational issue and does not tell the user of the site anything important I do not understand the fuss about class names like border. I prefer to use image class names that makes sence to me when I am koding - often: left (for flow left), right (for flow right), leftborder (flow left with border) etc. Makes it easy to remember, quick to use and doesn´t confuse those who look under the hood…

  5. April 7, 2005 by Roger Johansson (Author comment)

    Gabriel, Björn: CSS is about presentation, class names aren’t necessarily. They are part of the HTML and should make some kind of sense even if you decide to change the CSS.

    If you use the class name “border” for all images that you want to have a border, then redesign and don’t want those images to have a border anymore, that would leave the markup a bit confusing. Unless you change that too of course, which is what you ideally shouldn’t have to.

    This is not really a huge problem, but it’s an interesting thing to think about.

  6. I think it is in the choice of the developer to choose whatever names they think are more appropriate since there are no standards, i keep using the same ones so i can easily recognise them. the same as jonathan mentioned above i use _on or _off for what i want to show or not.

  7. April 9, 2005 by Roger Johansson (Author comment)

    Petros: Yes, of course. You’ll be happier down the line if you use non-presentational class names though.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.