CODEWITHSUNDEEP
jquerycssjquery-selectorscss-selectors
stefmikhail
stefmikhail

Reputation: 7145

Selectors in CSS & jQuery: just the class/id, or the tag as well?

Working with class/id selectors in CSS and in jQuery, I often see two distinct approaches:

1. Just the class or id:

CSS:

.foo{}

#bar{}

jQuery:

$(".foo")

$("#bar")

2. The class or id with its tag:

CSS:

div.foo{}

div#bar{}

jQuery:

$("div.foo")

$("div#bar")

My question is: Barring the use of the tag to further refine the selector, is there anything wrong with placing the tag with the class/id? Which is proper syntax?

I've heard some that say that unless the tag is needed for specificity, it is dead wrong to place it. While others say it makes no difference, and in fact prefer it as it provides further information concerning the selector.

What do you think?

Upvotes: 5

Views: 1157

Answers (6)

Jason Gennaro
Jason Gennaro

Reputation: 34863

With the tag included

$("div.foo") or div.foo{}

you are giving the browser a hand, telling it not to search every element with a certain class or ID. Instead, in the examples above, it would just search divs.

Although the performance may be negligible on a single element or a small page, it could add up if you are talking about a document with thousands of tags and several different css or jQuery calls.

Distinguishing between two elements

In some cases you may need it, too, to distinguish between two elements with the same class.

For Specificity

Plus, I think that you should include the elements when possible, as a way to make your CSS (and jQuery) as specific as possible... keeping the surprises to a minimum!

Better for shared code/troubleshooting/updating

It is also much easier to find/change/edit rules when the element is included in the rule.

EDIT

To respond to @stefmikhail's comment about @YoTsumi's benchmark test, here is the difference:

Searching for a unique ID will always be the fastest thing, as there should only be one ID on a page and the engine needs to look for it and it alone. However, as @BoltClock mentioned, there is more to this question than performance.

Upvotes: 5

optimusprime619
optimusprime619

Reputation: 764

Quoting this from Wiley's Smashing CSS book "

It’s hard to say three times quickly and can be even harder to thoroughly grasp, but it’s the key to understanding how CSS rules interact with each other. Specificity is a numeric representation of the “specific-ness” of a selector. There are three things that are used to determine a selector’s specifi city:

  1. Every element descriptor contributes 0,0,0,1.
  2. Every class, pseudo-class, or attribute descriptor contributes 0,0,1,0.
  3. Every ID descriptor contributes 0,1,0,0. Don’t freak out (yet)! Take a look at a few examples fi rst. div ul ul li 0,0,0,4 Four element descriptors div.aside ul li 0,0,1,3 One class descriptor, three element descriptors a:hover 0,0,1,1 One pseudo-class descriptor, one element descriptor div.navlinks a:hover 0,0,2,2 One pseudo-class descriptor, one class descriptor, two element descriptors :hash:title em 0,1,0,1 One ID descriptor, one element descriptor h1:hash:title em 0,1,0,2 One ID descriptor, two element descriptors Hopefully, this begins to give you an idea of how specifi city values are built up. Now, why the commas? Because each “level” of specifi city value stands on its own, so to speak. Th us, a selector with a single class descriptor has more specifi city than a selector with 13 element descriptors." So singnificance of overriding styles is presented with adding the tag names, as far as jQuery is concerned w.r.t classes u could always use selectors preceding them as some of the class names like "active" can apply to multiple (inline and block level ) elements leading to undesired effects. Hope this helped in some way...Cheers!

Upvotes: 1

voigtan
voigtan

Reputation: 9031

in jquery an plain ID is the fastest way you can find an element on a document, the next one (now I say fastest with all versions of browsers). Because jquery uses document.getElementById to find the DOM element. The Class on the other hand can be tricky, sizzle will run on it, and I actually think div.foo is faster then .foo because with a collection of the elements is allot lower then looking on all elements in the DOM. modern browsers has query selectors that will be faster then using the element name (note that I haven't done tests on this). Older browsers will find div.class faster then .class but in modern browsers you should get the other way around.

Upvotes: 1

Julien Lafont
Julien Lafont

Reputation: 7877

I've just write a benchmark to compare with and without the tag.

http://jsperf.com/id-class-and-tag

If you expect best performances : don't add the tag !

Upvotes: 5

Daniel Upton
Daniel Upton

Reputation: 5751

Personally I hop between the two like a itchy owl..

Sometimes it's nice to see the tag name to remind you (and your) co-workers what it is your actually working with and what kind of behaviour you can expect.

I think it's fine to use either.

Go with what feel most natural (doesn't make your eyes hurt)

Upvotes: 0

Derek Hogue
Derek Hogue

Reputation: 4564

I believe it's more performant for the selector engine of either (CSS or jQuery) to be as specific as possible (i.e., include the tag) - but you may never notice the difference. Here's a quote from jQuery creator John Resig discussing the selectors people use in their jQuery code:

For example, “.class” is far more popular than “tag.class” even though the second one is much more performant. What’s especially important about this is that the degree of performance hit isn’t that much of an issue. For example, the difference between 4ms and 30ms is virtually imperceptible. (Source)

Upvotes: 1

Related Questions