div class vs id

Question

When using divs when is it best to use a class vs id?

Is it best to use class, on say font variant or elements within the html? Then use id for the structure/containers?

This is something I've always been a little uncertain on, any help would be great.

Answer 1

I think we all know what class is, but if you think of IDs as identifiers rather than styling tools, you wont go far wrong. You need an identifier when trying to target something and if you have more than one item with the same ID, you can no longer identify it...

When it comes to writing your css for IDs and CLASSes, it's beneficial to use minimal css classes as far as possible and try not to get too heavy with the IDs until you HAVE to, otherwise you'll constantly be aiming to write stronger declarations and soon have a css file full of !important.

Answer 2

Where to use an ID versus a class

The simple difference between the two is that while a class can be used repeatedly on a page, an ID must only be used once per page. Therefore, it is appropriate to use an ID on the div element that is marking up the main content on the page, as there will only be one main content section. In contrast, you must use a class to set up alternating row colors on a table, as they are by definition going to be used more than once.

IDs are an incredibly powerful tool. An element with an ID can be the target of a piece of JavaScript that manipulates the element or its contents in some way. The ID attribute can be used as the target of an internal link, replacing anchor tags with name attributes. Finally, if you make your IDs clear and logical, they can serve as a sort of “self documentation” within the document. For example, you do not necessarily need to add a comment before a block stating that a block of code will contain the main content if the opening tag of the block has an ID of, say, "main", "header", "footer", etc.

Answer 3

Think of University.

<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />

Student ID cards are distinct. No two students on campus will have the same student ID card. However, many students can and will share at least one Class with each other.

It's okay to put multiple students under one Class title, Biology 101. But it's never acceptable to put multiple students under one student ID.

When giving Rules over the school intercom system, you can give Rules to a Class:

"Would the Biology class please wear Red Shirts tomorrow?"

.BiologyClass {
  shirt-color:red;
}

Or you can give rules to a Specific Student, by calling his unique ID:

"Would Jonathan Sampson please wear a Green Shirt tomorrow?"

#JonathanSampson {
  shirt-color:green;
}

Answer 4

If it's a style you want to use in multiple places on a page, use a class. If you want a lot of customization for a single object, say a nav bar on the side of the page, then an id is best, because you're not likely to need that combination of styles anywhere else.

Answer 5

The most important thing to understand is that IDs have to be unique: only one element with a given ID should exist within a page. Thus, if you're wanting to refer to a specific page element, that's often the best thing to use.

If you have multiple elements that are in some way similar, you should use the elements class to identify them.

One very useful, surprisingly little known fact is that you can actually apply multiple classes to a single element by putting spaces between the class names. Thus, if you posted a question that was written by the currently logged in user, you might identify it with <div class="question currentAuthor">.

Answer 6

I would say it is best to use a class whenever you think a style element is going to be repeated on a page. Items like HeaderImage, FooterBar and the like go well as an ID since you'll only be using it once and it'll help prevent you from accidentally duplicating it, since some editors will alert you when you have duplicate IDs.

I can also see it helpful if you're going to generate the div elements dynamically, and want to target a specific item for formatting; you can just give it the proper ID at generation as opposed to searching for the element and then updating its class.