Unrestricted Access

Web Standards

Choosing Class Names

Introduction

Semantics should also be used when deciding on class or id names for elements. Developers usually choose unwisely when deciding on these names, as they choose a name specific to the design they are creating at the time. This article will discuss what good class/id names are with examples of both bad and better choices.

Bad Choices

  • leftmenu
  • redlink
  • no_border

The reason these aren't very good class/id names is because they relate to the current design of the website. With the ability of CSS to change a design extremely easily makes naming elements properly important. A new design might have the menu on the right, and the "redlink" might be normal. When choosing class and id names keep in mind the purpose of the styling not the styling itself.

Better Choices

Below are examples of good class/id names:

  • container or wrapper
  • navigation
  • submenu
  • external_link

With names like these it's clear to see what the function of that area is. This is important when creating a new design as you can easily identify the purpose of the styling.

Generic Names

A page is often made up of five main areas. Below are some suggestions of the naming of these containers. Using these naming conventions also help people who use custom stylesheets to override certain styles to improve their own experience target the areas more easily.

  • header
  • navigation
  • content
  • sidebar
  • footer

Conclusion

Simply keep in mind what the elements function is, such as external link or more information, and not what the element is going to look like during the current design. Check this by reading through the code to check whether you can work out what each element does and not what it looks like. If you can do this then the class/id names are good.

Further Reading & Resources

Below are resources I used for this article and would be interesting further reading on the subject.

What's in a Name

This got me thinking about the benefits of naming conventions and I began to realize that these conventions matter, not just for the sake of web designers (and easier site redesigns), but for users too!

http://www.stuffandnonsense.co.uk/archives/whats_in_a_name.html