When to use Attribute selector vs a class?

Thanks! I've read the post, and the biggest thing I've got was that if you are don't want to add a class to each element, you could always use the attribute selector. But I'm not sure, if that's good practice, it seems more convenient, but doesn't attribute selector slow down the reading process?

Also!

you might have a class assigned to multiple elements that aren't of that type.

Can't we just create another class? and assign it to the elements

There may already be over-use of class assignments and you need another way to select just those items.

How many class assignments are usually enough? what's the golden rule before it becomes too much?

Also! when building something from scratch, would you always stick with class/ids? When should I use attribute selectors instead?

Matthew Francis there is no performance difference at all and you can confirm this here.

Personally, when I am building a project all by myself I stick to classes and ids. That is my preference. But again, you are assuming that you are writing all the CSS and HTML yourself. What if you are on a team with 8 other front-end developers and the HTML is generated on the fly?

Sure, you could create another class, but remember, if it is the same class name as a previously written rule (by someone else on your team), you won't get any warnings or any errors. It will just very gracefully override their rules for that class. So there, you have the possibility of colliding rules. As Steven points out, this would probably be more easily understood on a large scale project and one where you are not the only developer.

They are just giving you another tool to put in your toolbelt if you need it

edited for additional reference

I found another reference that actually times attribute selectors and class selectors and you can see the results in milliseconds. The result: in some browsers it's slightly slower, but in some it's actually faster Check out this article.

Makes sense! One more thing!

Sure, you could create another class, but remember, if it is the same class name as a previously written rule (by someone else on your team), you won't get any warnings or any errors. It will just very gracefully override their rules for that class. So there, you have the possibility of colliding rules.

Wouldn't that also apply for attribute selectors? If you have a background:red in a class, and a background:blue in an attribute selector; the background would override to be blue, correct? If so, dosent the attribute selector have the sameee flaw as the class?

Matthew Francis yes, it would. I'm just saying that you might have a use case for it. Imagine that someone put a class on certain things that has quite a few rules. And on about half of the items, you want to have a blue border when hovering over it, but not all of them. Specifically, you want only the items that have a certain attribute. Now imagine this CSS isn't on one page. It's on hundreds of pages. Is it more realistic to attach a class to dozens of items and just exclude those few or just select the attribute?

Thanks you for clairfying!