Choosing values for XHTML class and ID attributes
Posted Aug 5, 2004 at 12:21 AM
Picking good choices for class and id attributes should be easy, if you think ahead a bit and put some thought into why you’re using the attributes in the first place. This post gives some tips along these lines, and points out some pitfalls to avoid along the way.
Note: this is as much about HTML authoring as it is about writing CSS files. If you write HTML, you should know this information backwards and forwards.
Obvious rules when assigning values to class and id
The following are clear rules, which when followed will avoid clear problems.
Avoid using underscores in class and id values
See the Netscape dev edge article on CSS underscores for a discussion of why.
Always use lowercased values
See the Netscape dev edge article on CSS classes and id’s for a discussion of why. Additionally, it makes sense to be consistent, especially considering that XHTML has an XML foundation, and consistency can pay off. Perhaps you’ll one day write an XSLT against the markup?
The essential point here is that HTML and CSS should use the same case. The biggest problems arrive from browsers that treat classes in a case-insensitive manner, thus producing unexpected results. The decision to use lowercase makes consistency simple and is consistent with other attributes in XHTML, which should also be in lowercase.
Never start names, ids or classes with numbers
While this is no longer prohibited by the spec (and will therefore validate) it will cause problems with older browsers which followed the old spec.
Avoid using reserved words
Avoid names, id’s or class values that are reserved words in the client scripting languages or object models being used. What the heck, you say? There are two basic culprits here.
Let’s say that we want to identify our <body> tag as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Hello World</title></head><body id="document"><div>Hello World!</div></body></html>- Download this code: /code/33/1.txt
This may seem ok at first glance and initially, but what if at some point later on, someone revises your page with some client script that does something like this to access the body element?
var body = window.document.document; //kaboom- Download this code: /code/33/2.txt
This will cause problems. Additionally, some browsers will not behave correctly for the following, because “top” is a reserved word. Go figure.
<a href="#top">Go to top</a>- Download this code: /code/33/3.txt
Less obvious rules to consider
Usually, it makes most sense to name classes based on their meaning, rather than their appearance. One of the benefits of semantic markup and CSS over presentational markup is that it eases presentational changes. If you want something to be small and red, ask yourself why. Naming a class based on its currently-desired appearance misses the point, and leads to soon-to-be outdated class names.
- Care should be taken in assigning values to id attributes. Consider values like “navprimary” and “navsecondary” over values like “navleft” and “navright”, since right and left may swap places in the next redesign or even evolve to top and bottom.
- Additionally, care should be taken in assigning values to class attributes. Consider values like “navlinks” over values like “bluelinks”, since you’ll likely always have navigation links, though they may not always be blue. At the point that someone likes orange better, you’re stuck with HTML that uses class=”blue” which is now confusing, if not altogether meaningless.
- The point here is that the styling of the site should indeed be separated from the markup. You should not have to change the HTML to incorporate a new visual redesign, nor should you have to rename class or id values. This is especially important in cases where the same shared templates or classes of markup are used across a lot of pages contained in a lot of sites.
To summarize, the best practice is to…
Rely on element and id over class whenever possible, and code for contextual CSS styling. In general, strive to use class and id to give the markup more meaning, not less. Doing this not only clarifies your markup, it further clarifies your CSS.
About this page
This page contains a single post from Daniel Boerner's blog, of which Boot Camp + Windows Vista = no more Airport Extreme reboots is the latest post.
Are there more posts like this one?
Possibly. Within this blog, this post is categorized under webdev and it was posted on August 5, 2004. Those would be good places to start looking for related posts.
This post is closed to new comments.