AM – Attribute Modules for CSS
glenmaddern.com
AM – Attribute Modules for CSS
1–10 of 58 posts
Re: AM – Attribute Modules for CSS
#2This looks a promising approach to the chaos that is writing reusable and maintainable CSS. I wonder about performance though, especially on mobile. Will this perform as good as regular class-written CSS, even if you have >2000 loc CSS files?
Re: AM – Attribute Modules for CSS
#3This looks a promising approach to the chaos that is writing reusable and maintainable CSS. I wonder about performance though, especially on mobile. Will this perform as good as regular class-written CSS, even if you have >2000 loc CSS files?
Attribute selectors have the worst performance of any selector. Coupling that with the =~ operator is even more cause for concern. This is why classes and id exist.
Re: AM – Attribute Modules for CSS
#4`class="btn btn-large"` was sufficient for all the projects that I've seen so far. I'm honestly curious about the scale of the applications requiring such measures (there were some other attempts IIRC) and whether they "work".
On a side note, the name sounds funny in Turkish but I guess that's a minor concern.
Re: AM – Attribute Modules for CSS
#5This looks a promising approach to the chaos that is writing reusable and maintainable CSS. I wonder about performance though, especially on mobile. Will this perform as good as regular class-written CSS, even if you have >2000 loc CSS files?
Performance of long CSS files isn't really the (major) concern —its how many _elements_ are being traversed (size of the dom) that really effects CSS-selector performance.
Re: AM – Attribute Modules for CSS
#6Very interesting approach. One small peeve: this method will not allow you to use Sass/LESS nesting.
Re: AM – Attribute Modules for CSS
#7You may prefer the regular "data-" prefix (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Usin...) to "am-", especially if you want to be compatible with React.
Re: AM – Attribute Modules for CSS
#8interesting approach!
any real web/app using this technique?
Re: AM – Attribute Modules for CSS
#9This looks a promising approach to the chaos that is writing reusable and maintainable CSS. I wonder about performance though, especially on mobile. Will this perform as good as regular class-written CSS, even if you have >2000 loc CSS files?
Not a chance, browsers can optimise lookup for ids and classes (or even elements by name) because they have spec-defined semantics, and they can be preprocessed based on those semantics (e.g. used to key maps). Custom attributes have arbitrary semantics, so they can't be fit into such a static structure.
Technically nothing prevents browsers from inferring specific behaviors from the way a custom attribute is used, and dynamically generate shortcuts (e.g. key objects by attribute name, value or computed value), but I doubt any existing browser does so, so you get a "universal selector" behavior: every element of the DOM has to be scanned and processed to apply the rule.
And it's not exactly an easy problem, it's essentially equivalent to auto-generating (and tearing down, since elements, attributes and CSS rules can be added and removed on the fly) database indexes except you've got way less usage to rely on (for cost/benefit estimations), and way less usage time to recoup your investment.
Re: AM – Attribute Modules for CSS
#10You may prefer the regular "data-" prefix ( https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Usin... ) to "am-", especially if you want to be compatible with React.
You can definitely do this, though I think "data-am-" is better to avoid conflicts. React ignores unexpected attributes at the moment, but can't forever with Custom Elements (since it can't know what valid attributes for new elements are).
We've got an open discussion on this point, if you want to contribute there: https://github.com/amcss/attribute-module-specification/issu...