Andrea's Blogger Templates

It is often difficult to decide if an element should have an ID or class name. As a general rule, classes should be applied to conceptually similar items that could appear in multiple places on the same page, whereas IDs should be applied to unique elements. However, you then get into a debate about which elements are conceptually similar and which elements are unique.

For instance, imagine you have a site that contains primary navigation in the header, page-based navigation at the bottom of the search results page, and tertiary navigation in the footer. Do you give each of these a separate ID like main-nav, page-nav, and footer-nav, or do you give them all a class of nav and style them based on their position in the document? I used to prefer the former approach, as it felt slightly more targeted. However, it comes with its own set of problems. What happens if I decide that I now need search results navigation at the top and the bottom of the search page or that I need two levels of navigation in the footer?

If you use a lot of IDs, you will start to run out of unique names very quickly and end up creating extremely long and complicated naming conventions. So these days, I tend to prefer class names and only use IDs if I’m targeting something extremely specific and know that I’ll never want to use that name for something different elsewhere on the site. Or to put it another way, you should only use an ID if you’re absolutely sure the item will appear only once. If you think you will need similar items in the future, use a class. By keeping your naming conventions general and using classes you don’t end up with long chains of ID selectors all with very similar styles.

Due to the flexibility of classes, they can be very powerful. At the same time, they can be overused and even abused. Novice CSS authors often add classes to nearly everything in an attempt to get fine-grained control over their styles. Early WYSIWYG editors also had the tendency to add classes each time a style was applied. Many developers picked up this bad habit when using generated code to learn CSS. This affliction is described as classitis and is, in some respects, as bad as using table-based layout because it adds meaningless code to your document.

In the preceding example, each element is identified as being part of a news story by using an individual news-related class name. This has been done to allow news headlines and text to be styled differently from the rest of the page. However, you don’t need all these extra classes to target each individual element. Instead, you can identify the whole block as a news item by wrapping it in a div (code) with a class name of news. You can then target news headlines or text by simply using the cascade.

Anytime you find yourself repeating words in your class names like news-head and news-link or section-head and section-foot, it would be worth looking to see if you can break those elements into their constituent parts. This makes your code much more componentized and hence much more flexible.

Removing extraneous classes in this way will help simplify your code and reduce page weight.I will discuss CSS selectors and targeting your styles shortly. However, this overreliance on class names is almost never necessary. If you find yourself adding lots of classes, it’s probably an indication that your HTML document is poorly structured.