Still confused between classes and IDs in CSS

[fuzzybabybunny]

So you use classes if you plan on re-using that particular style somewhere else on the page.

You use IDs if you only plan on using that style once and only once on the page.

But there's nothing stopping classes from being used only once. So why wouldn't you just use classes all the time? Classes do everything IDs do, but they're also reusable. I don't get it. Suppose there's one element on the page and you style it with a class. In the future you might want to have another element on the page using the same style from that class. So that's great! The class is ready to be re-used. If you had started defining that one element with an ID, and in the future you added an element that you wanted that exact style on as well, you're SOL.

Is the only reason to use IDs because you need an accurate way to hook in Javascript or jQuery code and use it as a unique identifier for the hook?

Example:

I have a jQuery image slider box. The code used all IDs, which means I can only have one image slider box on a page. Now I want two on the page at the same time. But I can't. The jQuery (I guess, I don't read jQuery) hooks on that ID and not the class, so it'll only work once on any page?

 

[Markbnj]

CSS selector rules are a means of identifying which elements you want a style to apply to. If you select on IDs then the rules apply to one and only one element (with a simple, non-nested selector). If you select on classes then potentially more than one element is affected. There's not much more to it than that.

JQuery largely re-uses the CSS selector rules, so it works the same way. You aren't restricted to one slider per page because of this. For example...

$('#myDiv1').slider();
$('#myDiv2').slider();

Etc.

Just think of the selectors as ways to filter out of the DOM the elements you want to operate on. Presumably this will also work:

$('.mySliderDivs').slider();

 

[Aluvus]

Using IDs helps the human being that will be maintaining the page in the future.

Using IDs means you can be confident that only one such element exists, which is helpful both for Javascript and CSS (ex if you are absolutely positioning something).

Styles applied to IDs can also take precedence over styles applied to classes, because the ID is more specific.

 

[Cogman]

The biggest use of IDs is speed.

In javascript on pretty much every browser, finding an element by ID is usually at least an order of magnitude faster than finding an element by its class/tag.

The same goes for CSS. The browser knows that a css rule is applied only to one spot in the html, so it doesn't even bother doing any checks on the rule until it finds the ID it is concerned with. With a class, the browser pretty much has to check every tag against every defined css class to see if it is applicable or not.

There are certainly ways of improving the speed of things. By getting specific, you can help your browser move along. Tags like ".myClass" are about the slowest css selector you can give a browser, "div.myClass" is a better way to do a tag.