Choosing Class & ID Names

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.