CSS selector style?

Question

Sometimes I find myself creating a CSS class for a single element. So instead, I can use an ID and set a rule for this ID. Which way is preferable stylistically?

Answer 1

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.

Answer 2

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!

Answer 3

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.

Answer 4

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.

Answer 5

This is absolute madness. Everybody always forgets to mention selector specificity and how styling IDs can screw you over very hard and very fast. I have made a new rule for myself - stop using ID selectors.

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. People should be shouting this from the rooftops. This is most certainly NOT a matter of personal preference. Consider the following code:

<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 blown website. Like I said, madness.

Google "OOCSS", read everything you find, and never look back.