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:
Then using simple selectors :
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:
However, when constructing css selectors, I understand attributes are unqualified selectors which can have detrimental performance hit:
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]{}
<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]{}
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
