Grow your CSS skills. Land your dream job.

Do you frown on ‘shortcut’ classes?

  • # October 11, 2008 at 12:32 am

    I’m in the process of converting an osCommerce site to a tableless layout. On the first pass through, I yanked out all the <table> and <tr> tags and replaced the <td> tags with <div> or <p> tags.

    This first pass was intended to quickly do the major work and then a followup pass would do the fine tuning. I made a number of what I call…

    Shortcut Classes:

    .left { text-align: left; }
    .right { text-align: right; }
    .center { text-align: center; }
    .bold { font-weight: bold; }
    .italic { font-style: italic; }
    .underline { text-decoration: underline; }

    … mostly as placeholders, in order to do this quickly. For instance, I replaced:

    Code:
    some stuff some other stuff

    with:

    Code:
    some stuff
    some other stuff

    Well, that’s kind of an extreme example. Usually it isn’t so involved but you get the point.

    My question:

    Do you frown on these sorts of ‘shortcut classes’?

    I realize that ‘main’ isn’t very semantic but the others are and make it easy to glance at the code and know what’s going on.

    Since I’m kind of new at this, I want to stop bad habits before they are too deeply enforced. But I’m not sure this is really such a bad habit. It seems pretty useful to me.

    What do you think?

    # October 11, 2008 at 2:30 am

    Short answer: no.

    However, rule of thumb is you shouldn’t have a class name that describes a physical attribute, like a class name of red – if you’ve got certain text that you want to be red. Reason being, in the future you may decide that red isn’t the right color, and you want it to be blue. Now you either have blue text that has the class name of red which can be confusing in the future, or you have to go back and change all those class names.

    I have what I call utility classes that I have in my skeleton style sheet I always start off with. Things like .leftImage or .rightImage. Now I guess it depends, if you decide on unbolding all of those bold items are you going to remove all the class names, or are you going to change the font-weight to normal in your stylesheet? What if you decide instead of bolding them you just want them a different color, like red. Then you’ll have non-bolded elements that are red with a class name of bold.

    # October 11, 2008 at 12:06 pm

    Thanks Cotton,

    Solid reasoning. That makes great sense. And I definately like the term Utility Classes better than Shortcut Classes.

    As to redeclaring .red as blue or bold… I am one of those sick individuals who would rather manually change 1000 instances of class="red" to class="blue" than live with .red { color: blue; }. I just wouldn’t be able to sleep at night. :)

    Point well taken though that something more descriptive, like .highlight, would make much more sense.

    Thanks for the reply.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".