ansaurus

Question

Answer 1

+2 A:

Using a class is perfectly acceptable, possibly more so than using an id. Use of ids should be limited as much as possible, because they can clash with other ids and break things like document.getElementById.

An id selector is more specific than a class selector, which usually makes it a better choice for your use case. -- David Dorward

However, a high "specificness" is not always desirable. Consider body#faq #col_b a {color:gray;} in master stylesheet and then someone develops a plugin with a gray background that goes on faq page, now they need to use !important or create another id attribute to give higher specificity.

Also, consider the use of multiple classes in a single body element:

<body class="faq two_column big_footer"> ...

no 2010-10-12 22:11:42

Your example of someone developing a plugin where the styles might crash is very likely to happen in this situation. To me, it seems that if someone wrote the rule body#faq #col_b a {color:gray;}, you are correct that an ID/class would possibly have to be applied to get higher specificity. However, if you had body.faq #col_b a {color:gray;} It seems to me that an ID/class would also have to be applied to get higher specificity. Can you explain more what the difference is between these two situations?

Josiah Sprague 2010-10-13 16:47:16

There's not much difference, really... I personally wouldn't do an id of col_b (for a right-hand column in a page layout, say), I'd use a class. Between `body#faq .col_b a` vs `body.faq .col_b a`, the second should be much easier for someone else to override. In general I think if you're creating CSS that others may build on, high specificity (if that's what it's called) is a bad thing when lower specificity can achieve the same thing.

no 2010-10-14 01:42:57

Good reasoning. If others are building on your CSS, always use the lowest specificity necessary to achieve the desired results.

Josiah Sprague 2010-10-21 17:45:06

Answer 2

+3 A:

ID needs to be unique per page (if you want valid markup), meaning only one instance of a particular ID should exist on a page.

Classes, on the other hand, can be applied to numerous elements per page. Use classes for things that reuse the same styles and use IDs for more unique elements that require their own styling.

Ideally, use classes whenever possible and limit the use of IDs.

For more information on ID, see here, and more on classes, see here.

Tyler 2010-10-12 22:12:17

Thanks. I've already read up on w3schools. I could use either class or ID in my situation and it would be acceptable. However, I am trying to brainstorm any possible positives/negatives of using one over the other.

Josiah Sprague 2010-10-13 16:49:42

In that case, there really isn't any significant impact as long what you're using them for is semantically correct.

Tyler 2010-10-13 17:06:42

Answer 3

+1 A:

It is better to use a class if you plan to reuse a style in pages. IDs are good if style sheet is designed for a specific page. But still depends on your app.

stackunderflow 2010-10-12 22:12:36

Answer 4

A:

You can (read: should) only use the id on the body tag.

ID = single use per page

Class = multiple uses

1 Body tag = 1 id tag. This can be the same on different pages. Essentially, using the class tag is probably overkill for this purpose.

Nelga 2010-10-12 23:17:19

Answer 5

A:

An id selector is more specific than a class selector, which usually makes it a better choice for your use case.

David Dorward 2010-10-12 23:19:49

ansaurus

tags:

views:

answers:

Class or ID on Body Tag

related questions