Assigning Names
Step1
There are a few IDs that are used very commonly on web pages, for example, container (or wrapper), header, content, sidebar, footer. These are great examples of CSS IDs, because the names used are self-explanatory. They describe the purpose of the div or element they identify.
Step2
Both IDs and classes should be given self-explanatory names. The trick is to choose a name that will be self-explanatory over time.
Suppose, for example, that you have a page element that explains the day's specials. You decide to make it red. You could either name it "special" or you could name it "red."
The name "special" would be a better choice. Over time, your color scheme might change and a name like "red" would be confusing, but a name like "special" would still help you recognize the purpose of the class or ID.
Step3
Make sure the names you select will still mean something when you need to revise a style sheet you haven't touched for six months or a year. Those will be good choices.
When to Use Class or ID
Step1
An ID can only be used once per page, for example, there can only be one div on a page using the ID content. But a class can be used many times on a page. For example, you might have several images on a page that use a class called "leftfloat," or perhaps "rightfloat."
Step2
Based on the information in Step 1, you might think you should use a lot of classes and only a few IDs. Actually, the opposite is true. For leaner markup, you want to use classes as sparingly as possible. Using a large number of classes even has a name, like it was a disease or something. It's called classitis.
Step3
Classes are sometimes necessary. But sometimes, giving an element an ID and then using a descendant selector to target the children of that element creates much less code than assigning a class to each child element would.
Step4
For example, suppose you have some hyperlinks in a list. You could style the links by assigning a class to every single link in the list. Or you could assign an ID to the list container (the UL or OL element) and write a rule using a descendant selector. Suppose you give a UL an ID like "subnav." Here's a descendant selector that would style the a link without adding a class to the markup.
#subnav ul a:link {rule here}
Step5
When something occurs again and again on a page in places where a descendant selector won't work, then a class is perfectly fine to use. I already mentioned the example of using a class to float an image to the left or the right anywhere on a page.
Suppose you have several paragraphs for each item you describe from your catalog, but you want one of the paragraphs to be different somehow. If it was the introductory paragraph you could assign it to a class called "intro." If it was a paragraph giving user testimonials, you could assign it to a class called "testimonial." You could then create a style for the class .intro or the class .testimonial that would distinguish those particular paragraphs.
The beginning of a stylesheet with some ID rules.
