How do I use IDs and class correctly in CSS?

Today a bit idle, want to ask you about ID and class use.

By literal means, an ID is the "unique flag" of an element in the entire document, and class is the category it belongs to. By syntax, IDs with the same name should appear only once in a document, and class names can be reused.

But when used specifically, which styles should be used with IDs and which styles to use class instead? One answer is simple:

Elements that only appear once in the page should be represented by an ID. For example, header (header) page footer (footer), navigation menu (Main-menu) and so on. But is it really that simple?

Let me give you a few examples to illustrate the embarrassment I've encountered:

Most pages are two-column layouts: one main column (main column) and one sidebar (side column). Just like this:

　　

OK, we'll use two div to represent them. The question is, should I use ID or class? According to the general understanding, a page will only have a main bar, a sidebar slightly, so of course, should use ID. The document is written here:

#main-col {float:left; width:700px;}

#side-col {float:right; width:200px;}

It's also a feast for the eyes, isn't it? So I decided to use the ID.

So the page completes, the website completes, on-line, the operation, the visit quantity is big. That's when the company decided, well, we should add a few banner ads to some of the pages. "Banner" Oh! This means that it has to be cut across the main bar and sidebar, both of them in the same place. So we re "invent" a style: banner, let Banner to a clear:both; Then put it in the middle of the page to prevent two columns from floating. Then continue to divide the two columns behind the banner. Here is the schematic:

　　

So HTML should be like this:

The problem is easy to solve (thanks to my experience, praise yourself and click.) ）。 There is only one problem: the two IDs Main-col and Side-col are duplicated. This problem is actually not troublesome, they all changed into class not just good (or even, not to change it, I do not believe that the browser will give me an error, hum).

But didn't I give myself a mouth? Originally also vowed to say, Main-col will only appear once, so with ID ... So the lesson is, Main-col and Side-col, or Left-col, Right-col, Extra-col, Xxx-col, these styles for column layouts, give me class. Well, write it down on the laptop.

When designing a page, a search box (Search-box) is placed between the header and the main menu. Since our header (header), navigation bar (main-menu), Login box (login-box) are all using IDs, the Search-box with them should also be ID? Well, be careful, the boss will probably let you at the end of the page also put a search box, you use the ID you are dead. So search-box should use class. But this is strange, with what login-box with ID, and Search-box but with class?

Wait, do you think the navigation bar is going to be the only guarantee? I'll tell you one example:

　　

Here, the boss will come to a different point, let the navigation bar on the left. This is no problem, with a UL will be done to pull. I set its ID to Main-menu but after a while he said, well, for usability (cough. ), we need to divide the menu into two parts. It's like:

　　

Uh.. Say, divided into two ul is good. But are their IDs called Main-menu?? Ah, the old problem is coming again.