CSS selector style?

Sometimes I find myself creating a CSS class for a sin开发者_Go百科gle element. So instead, I can use an ID and set a rule for this ID. Which way is preferable stylistically?

---

I'd say that this is more of a person-by-person preference.

For me, I try to think ahead: will I ever create two of these on one page? If the answer is even vaguely "yes," then I use classes. If I can't see the need for creating a second of the particular element, I'll use an ID.

In terms of the ID itself, I try to name it something that I won't conflict with. For instance, I'll choose something like:

#aboutus_team_wrapper {}

It's long and ugly, but I know exactly what it's for, where I'm using it, and I know I'll never create something that conflicts with the name.

Hope this helps!

---

Don't forget about selector specificity! I avoid using ID selectors whenever possible.

Reference: http://www.w3.org/TR/CSS2/cascade.html (6.4.3)

An ID selector is 10 times stronger than a class selector. That means you would have to use 11 class selectors to cancel an ID selector, or you would have to append the same ID selector to every CSS rule you write, or my favorite, use inline styles or !important rules!

"But why use a class style on an element that I know is only going to show up once? That's what ID selectors are for."

Because ID selectors screw up the cascade. Consider the following (un-semantic) code to illustrate this statement.

<style type="text/css">
    #header a { /*Selector Weight: 101*/
        font-weight: normal;
    }
    .bold { /*Selector Weight: 10*/
        font-weight: bold;
    }
</style>
<div id="header">
    <a href="#">Happily not bold.</a>
    <a href="#" class="bold">Sadly, not so bold.</a>
</div>

<a href="#" class="bold">SO bold...</a>

To make this work, you'd have to add:

    #header .bold { /*Selector Weight: 110*/
        font-weight: bold;
    }

Great, now we have two bold classes. You can see how quickly this can ruin you. Imagine trying to deal with this on a full featured web application.

---

No hard and fast rules on this one, it's as much about:

• why you're using the style
• what you're doing
• where you're going

more than the number of elements that are involved.

---

If a style only refers to one, unique element, an ID based selector is the most appropriate.

If a style may refer to multiple elements, use a class.

The other thing to keep in mind is ID based selectors have higher priority than class based ones. This helps if any of your unique, ID'd elements inherit styles from more generic, classed based rules.

---

I prefer to use the ids for the most important elements that are repeated in the page, such as the Stackoverflow logo (and all the header) on this page.

Use a CSS class when the elements are not page-specific and can be repeated among different pages, or many times in the same page.