The right way to name id and class attributes
“What’s in a name? That which we call a rose by any other name would smell as sweet…”
You may recognize that line from Romeo and Juliet. It’s one of the few phrases I remember from my high school Shakespeare class. It’s also the reason I’m glad William never coded the markup for a website. The point he was trying to make is that names aren’t important; the substance underneath is what counts. But, in the world of web development, names do matter. Especially when it comes to id and class attributes.
Function and meaning versus style
The rules for naming an id or class attribute are simple. Keep it short, keep it consistent (i.e. if you use hyphens, underscores, or CamelCase for one, use the same format for the others), and make sure the name is based on the function or meaning of the element, NOT the style to be applied.
Here’s a classic example. Let’s say you want to code the markup for a form so that any mistakes a visitor makes can be listed in red text. You may be tempted to code the list like this:
<ul class="red"> <li>Error 1</li> <li>Error 2</li> </ul>
It’s an efficient use of CSS since a single class let’s you target both the list and items. But there are a couple of problems. First, a class of “red” doesn’t explain the relationship of the list to the layout as a whole. Second, what happens when you decide to redesign the site and change the color of the list from red to orange? You either have to rename the class to “orange” so it makes sense or let it slide, in which case the code becomes confusing.
The purpose of the list is to show errors or warnings, so a better approach would be this:
<ul class="errors"> <li>Error 1</li> <li>Error 2</li> </ul>
Now there’s a separation of the structure of the page from the style information. The role of the list within the layout is clear and you can change the color to whatever you want without causing confusion. If another web designer had to work with the code, they would have no trouble following it.
Before you name a class or id attribute, ask yourself these questions:
- What’s the purpose of this tag or element in my layout?
- What function does it serve?
- What meaning does it hold apart from the styles I want to apply?
The answers will help you find the best name almost every time.
An exception to the rule
Embedded images are a special case. These are the pictures in the content area that complement the text, usually centered or floated to the left or right. Because a page can have several imbedded images and they all serve the same function, it can be hard to come up with names to classify them that aren’t tied to a style.
You could use something like “pos-1″, “pos-2″, and “pos-3″. But it would be hard to remember which class did what, and if you gave the site to a client to add their own content, things could get messy. In this situation, it makes more sense to stick with generic class names like “center”, “left”, and “right”, even though they’re based on styles.
The moral of the story is to forget everything you know about Shakespeare (if you haven’t already) and remember that the names of id and class attributes are important. Keep them short, consistent, and meaningful to the structure of your layout.
About Jason Garrison
Jason is a freelance web designer and developer who has a healthy obsession with web standards. When he’s not knee-deep in code, you can find him in a meditative state communing with the universe.
One Comment
Nice tutorial article for newbies :) . Well explained . Thanks for sharing this informative post.