Thoughts on attribute selectors
Want to open this for thoughts on using attribute selectors. I’ve always used classes for modifying elements to different presentation configurations. What I mean is, as a contrived example:
<div class=“feature feature-icon-top feature-full-width feature-reduced-padding”>
Then using simple selectors :
.feature-icon-top{}
.feature-full-width{}
Etc
I’ve recently started using attributes because I like how it separates the class and the modifications, and helps to easily understand the code. In particular, I’m using HTL and slightly in AEM so a class with so many inline codes is difficult to read. Again a contrived example:
<div class=“feature”
icon-position=“top”
feature-width=“full”
feature-padding=“reduced”>
However, when constructing css selectors, I understand attributes are unqualified selectors which can have detrimental performance hit:
.feature[icon-position=“top”]{}
.feature[feature-width=“full”]{}
Etc
In reality, I don’t notice any issues on the page, it’s fast and performant. But I’m inviting other points of view on this approach - are we talking about potentially significant effects on performance? Is it bad practice? Any other considerations?
Would the ordering help, ie
[icon-position=“top”].feature{}
Or simplify even more
[icon-position]{}2 Replies
This works but is nonstandard and can be confusing / conflicting with syntax from frameworks like vuejs which add their own attributes. The standard way for doing this would be to prefix your attributes with
data-. Can read more about that on mdn https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributesAh, extremely handy 😉 thanks