CSS classes and IDs can be a very confusing subject indeed. The question seems to arise when do you use an ID and when do you use a class? For starters, for those of you that do not know what makes a style in CSS a class and what makes it an ID, the class always starts with a period. Classes and IDs are not intentionally saved for anything specific. Anything can either be a class or an ID, it just depends how you want to organize your CSS. Some web designers never use classes and only IDs, some designers only use IDs. By using both classes and IDs in an organized fashion, designers can really make their code flow well and make a site that is easier to change and adapt in the future.
.someClass {
}The ID style type always startes with a number sign.
#someID {
}So, when should I use a class over an ID or an ID over a class? In my opinion IDs are saved for those styles that are more or less for large unchanging items in your site that are at a higher level of importance such as headers, navigational, and footer DIVs. Containing DIVs are are a great place to use IDs also. The IDs act as the sound structure of the CSS, things that you would never want to change, or take great care in changing. Think of them as being part of a frame of a house, the plumbing, or the electrical box. These are things that you do not want to change if at all possible down the road.
Classes are best suited for content styling that may have to be repeated several times. For example, a paragraphi style would be a good place for a class over an ID. Classes are also great for nesting. Nesting of styles is basically the act of placing a style within a style. Lets say you have a style called Heading1. This style might be a large red header that shows up on the top of pages. You might want to create a heading that is very similar to this style, however has a slightly different color. For example if you wanted to have a heading that was not as prominent yet had the same size and typeface (font). Creating a nested style would let you create a style based on another higher level style without having to write out all of the parameters again.
.heading1 {
font-family: verdana;
Size: 18px;
color: #cc0000;
line-height: 14px;
}A nested style would look similar to this.
.heading p {
color: #663333;
}You did not have to replace all of the style, only the color.
So how would you implement this in your code?
<div class="Heading1">Some Heading
<p>A different Colored heading</p>
</div>Since you have already defined the div as a heading1, anything within the DIV under a paragraph tag will be a different color as stated above.
Anyways, this not only helps to lower the amount of lines in you CSS file, it also helps you create sub styles that are easy to manage.
Templates
The idea of having different classes and IDs that are nested are very helpful in creating templates. You could easily have a main tempalte set up and then several different other template styles that are based on your main template. Whole websites could look completely different if you have several different nested styles set up, based on your original template styles.
For example, let say you create a heading1 and you wanted three different options for users to choose from in your CMS.
.Heading1 {
font-family: Verdana;
font-size: 24px;
color: red;
}
.Heading1 template1
font-family: arial;
font-size: 36px;
color: blue;
}
.Heading1 template2
font-family: Times;
font-size: 36px;
color: Green;
}You will notice that each of these are pretty different, however they could be the same place within the CSS layout of your template, so when displayed they would look totally different, however have the same structure that would not have to be changed. This is one of the beauties of CSS, the ability to create a style and then have several different options that all based on a higher level.
