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