Do you favor id selectors over classes? How do you evaluate which selectors are best for a given project?
-
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 useidselectors, 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 ARIArolelike “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.
-
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.
-
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?
-
Recently I’ve been moving away from using
id‘s so much and, like Aaron, using attribute selectors, likerole. I’m finding the less I have to worry about sprinklingid‘s 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.
-
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).
-
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.
-
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).
-
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.
-
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”.
