CSS Optimization: Element ID vs. Class

Question

With MVC and jQuery I am making significantly more use of CSS. A question that came to mind is what is the best approach for using Element IDs vs. Classes. If I use Element IDs the selectors in jQuery are shorter. For example:

#imageTag... $('#imageTag')
#searchTag... $('#searchTag')

As an alternative it could be structured with a parent container element.

#searchTool, #classifyTool .tag

In this case selectors such as

$('#searchTool .tag') or $('#classifyTool .tag')

could be used. This approach can be particularly useful when there are multiple instances of a class throughout the page, e.g., .tag. You just change the parent container object.

This is just a simple theoretical example and is not intended to represent real styles, just portray the concept.

So there are two questions:

1. Is there any impact on performance of either the page/CSS or jQuery assuming there are a large # of styles on a page?

2. The second approach seems more flexible and maintainable. Thoughts based upon your experiences.

Is there a better alternative approach?

Thanks

Hibbs

Answer 1

• IDs are the fastest
• Tag names are next fastest
• Class names with no tag name are the slowest

As for which one to use, use whichever is most appropriate. If you have a search box on your page then using an ID for that would be most appropriate because there's only one search box. Table rows on the other hand will probably be identified by class because there is (or can be) more than one.

Try not to use selectors (in CSS or jQuery) like ".class". You're forcing jQuery or the browser to basically traverse the entire document tree. Most of the time the class will only apply to one kind of tag so specify that (eg "div.class"). That alone can make a huge performance difference (particularly on jQuery with a large document).

The length of the selector should not be a consideration. Performance, readability and maintainability should be.

Venlo

+1 - technically true, however I would more strongly emphasize the fact that the performance differences are almost entirely theoretical - it will practically never matter in a real-world scenario. – Diaster

(Assuming one uses them properly that is - your example of element.class vs. just class is a good one) – Diaster

Untrue, I've reduced a page load time from >1 second to <100ms largely on eliminating naked class selectors (that wasn't the only thing but it was a huge component). – Venlo

Class names shouldn't be too unreasonably slow in most browsers thanks to the fact that almost every browser has the getElementsByClassName() method. The only one that fails here is IE, which is a big factor here, admittedly. Also, I should point out that I haven't looked at jQuery's Sizzle selector engine code so I don't know if the engine uses this to optimize things any. Queries can also be sped up by using the new QuerySelectorAll() method to make jQuery selector speed even less relevant, but that's even less supported. – Convenience

The google page speed docs recommend preferring class and ID selectors over tag selectors: code.google.com/speed/page-speed/docs/rendering.html – Series

Is this true also for plugins like jQueryMobile? – Cannon

What about using class names and limiting the search like $(".inputFirstname", $("#somediv"))?? – Superannuated

That's from JQuery point of view, what about browser's? Elements with IDs are slower than class names, no? – Curarize

@Curarize jQuery and CSS are different things but both read selectors from right to left. See #13679202 – Jannajannel

Answer 2

I generally prefer the class method. The reason being that you don't have to write up a new css selector for each new ID'd element in your system.

Also, I tend to differentiate between "structure" and "style" css. Meaning, that I separate things that deal with size (width / height) and position from css classes that do font-weight, color, etc.

For non-changing structural framework pieces, I'll use ID's. For parts that may have multiple representations in the HTML, I'll stick with class mechanisms.

Stocking