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.
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
id names keep
in mind the purpose of the styling not the styling itself.
Below are examples of good class/id names:
- container or wrapper
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.
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.
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.