Do you favor id selectors over classes? How do you evaluate which selectors are best for a given project?

  1. , Aaron Gustafson said:

    To me it really depends on the situation. For general application of style, I prefer classes, but there are specific instances where an element is unique to the page. In that case I still use id selectors, especially if I need to support IE6. If IE6 is not a factor and the element in question is a landmark (and I am using an ARIA role like “contentinfo,” for example), I will opt for an attribute selector (e.g. [role=contentinfo]).

    I try to do whatever is best to avoid the arms race of selector specificity.

  2. , waylonrobert said:

    Generally speaking, I prefer classes. It takes less keystrokes to type a “.” then a “#” ;). In all seriousness, I generally follow the rules. I use classes for content elements I know I’ll be reusing throughout, and ID’s for wrappers or other content elements I know I will be using once. Curious question: do you use any of the CSS compiling solutions, such as Sass, and if so does it change the way you write CSS? I’ve found it does.

  3. , Emily Lewis said:

    Waylon - I haven’t yet used any CSS compilers in practice (looking forward to experimenting soon). Though, reading about others’ experiences, it does indeed seem to change the way they write CSS. You mention it does for you… care to be specific about how you’ve seen your CSS style change?

  4. , David Mead said:

    Recently I’ve been moving away from using ids so much and, like Aaron, using attribute selectors, like role. I’m finding the less I have to worry about sprinkling ids through my mark-up the more I can leverage meaningful, and re-usable classes (OOCSS as mentioned in the article).

    Having the new HTML5 elements helps too.

  5. , jmbertucci said:

    I’ve grown into using more classes than ID with the exception of when ID’s for specific content pieces are available.  I often see myself using ID’s a lot like namespaces in programming.  And I do use classes on occasion for things like styling a title called “.title” vs targeting the “H2” element of a given class because we might find that a given style can be usefully applied elsewhere.

    I suppose I’ve cut my teeth on working around IE6 and I still avoid attribute selectors but will be good to start breaking that habit of not using them as IE6 traffic is dropping (but still there to a measurable degree).

  6. , Emily Lewis said:

    David - Great point about how HTML5 makes element selectors much nicer to work with. And, while I’ve only used OOCSS for one project (and it probably wasn’t the “right” project, in retrospect), re-usable classes are so helpful on large sites and with large development teams… almost creating a “style guide” that the team can reference.

    jmbertucci - I completely understand having to deal with IE6. I’ve still got those projects too. It just reiterates the point that style should be dictated by the project.

  7. , Candy66 said:

    I’ve grown into using more classes than ID with the exception of when ID’s for specific content pieces are available.  I often see myself using ID’s a lot like namespaces in programming.  And I do use classes on occasion for things like styling a title called “.title” vs targeting the “H2” element of a given class because we might find that a given style can be usefully applied elsewhere.

    I suppose I’ve cut my teeth on working around IE6 and I still avoid attribute selectors but will be good to start breaking that habit of not using them as IE6 traffic is dropping (but still there to a measurable degree).

  8. , zclancy said:

    I generally do classes. The time I find myself using IDs is if an element is specific, and should not inherit it’s style from something, or if I’m going to be selecting specifically using JS/jQuery.

  9. , rathkej said:

    I typically do classes.  To be honest, I don’t use ID’s that much simply because that’s what we learned in school, although I have always switched to ID’s when thing’s get super specific, and I never quite remembered why…Must just be ingrained in my mind at this point. 

    The only time I really use nested elements is for lists.  I can’t wait to start using the new CSS 3 rules though.  What a great example to do it with a .pdf file.

    Super thought provoking article however.  I will probably read it multiple times before starting another website, and try to build the CSS right from the ground up.  My website right now would be far too time consuming to go through and try to make the CSS more “up to date”.

Please log in or sign up to share your thoughts.