Attribute selectors are a very flexible way to manage styles for large-scale CSS because the attribute selectors will always have a specificity of 0-0-1-0
.
[aria-*]
selectors are perfectly fine to use as styling hooks, and I also recommend using custom [data-*]
attributes to fill in the gaps where you might need a one-off. Certainly class selectors should continue to be used, however you can do some very elegant style extensions with attribute selectors:
[data-foo] {
color: red;
}
[data-foo="bar"] {
color: blue;
}
[data-foo="fizz"] {
color: green;
}
Each of these selectors has the same specificity, and the cascade will allow the styles to be applied appropriately.
You could create your own form of classes by using the [attr~="value"]
selector if need be.
Using the "attribute contains" selector can be useful for a technique that I call "classy images"
One of the hidden benefits to using attributes over classes is a performance gain in JavaScript. Instead of having to check for the presence of a class on an element (which is remarkably easy to get wrong), browsers have supported getAttribute
, hasAttribute
, and setAttribute
for a long time.