How To Deal With An No-Longer-Semantic ID or Class Name

Avatar of Chris Coyier
Chris Coyier on

Errol writes in:

What’s your thoughts on a situation where you’ve started
naming classes and then halfway through you realize that
you need the same class but the naming isn’t semantic.

Do you create a duplicate class, rename the existing one
to something more general, or something else?

For example:

I’ll have a #modules_list_footer but now I need the same thing
for articles, so I could just use modules but it
should be “#articles_list_footer”.

We’ve all been there.

When you first coded the site, it was beautifully semantic. Everything was perfectly named and made sense to all. Then the site grew, new areas were added, new layouts were needed, stylesheets started to bloat. Your “#articles_list_footer” made perfect sense, but now you need to use that same footer for a new area that really isn’t and article. It’s tempting to just use that ID anyway, because it will work just fine. But that starts you down a road of deteriorating semantics… What’s a poor coder to do? These are the options I see, in order from best to worst.


1. Rename!

I’m taking a stand here and saying your first option should be to rename the offending ID or Class name. It might be a pain. It might involve updating a lot of pages and being nasty grunt work, but… it’s the right thing to do.


2. Make a New Name

Situations may arise where it is just way out of the question to rename. Thousands of pages… potentially missing pages and causing layout issues… In this case I am suggesting that you add a new name in addition to to original now-outdated name. In Errol’s case, just add a new ID name that makes more sense generically:

#modules_list_footer, #list_footer { 
   /* Note: #modules_list_footer is deprecated, use #list_footer */

Since they will be sharing the same attributes exactly, you’ll be all set to use the new name. Then make a note in your CSS that the old name is deprecated for future developers.


3. Use the Old Name

If you aren’t talking about just a single new name that you need, but lots and lots of names, the CSS bloat that #2 might cause you might be just too much. You aren’t going to be suffocating any kittens by just giving up and using that old name. At least you have learned your lesson and you know what you can do better next time which puts you ahead of 80% of other web developers anyway. Perhaps make a note in your CSS about the naming problem, and the next site you code, you can call it #list_footer to begin with!


Of course, these are just my thoughts. I’m sure plenty of you have your own methods for dealing with this. Anybody have other ways of handling this?