Why has AM not taken off?

[Jakobud]

I just came across the idea of Attribute Modules today. The advantages seem very clear. I'm curious if anyone knows why AM has not taken off and why it hasn't been adopted more widely by CSS frameworks, etc. It's weird because its from 2014 but I haven't heard about it until I stumbled on it today.

As for feedback, the only way I would change AM is not having multiple values in a single attribute like:

am-Button="wide red uppercase"

While this approach is simple, its definitely more difficult to deal with when you start using JavaScript to interact with these attributes. With classes it's easy because lib's like jQuery have .addClass() and .removeClass(). It's easy to add and remove modifier classes using tools like this. But non such tools exist for custom attributes.

For example, if you are using JavaScript to dynamically change the above button from red to blue, you have to use a bunch of JavaScript to parse through the current values, remove all "color" values and then add then append blue into the attribute value.

A better solution would be for each different type of thing into it's own attribute. So instead of the above, have:

<button am-Button-size="wide" am-Button-color="red" am-Button-text="uppercase">hello</button>

This has all the power of the proposed AM solution, but it uses separation of concerns to compartmentalize each type of attribute. So now, if you need to dynamically change the color of the button, it's just $('button').attr('am-Button-color','blue');. No more parsing out values and having to remove values first, etc. It's just changing a single attribute to a new value and done.

[geelen]

That's a good idea. I'm not sure why AMCSS didn't go further, but there's a lot of different pure-CSS namespacing techniques out there, and they're all pretty interchangeable. So it's just a matter of someone releasing a CSS framework that uses it before it'd get popular.

I like your am-Button-size vs am-Button-color though. Basically, AMCSS is whatever works for you once you realise you're not limited to classnames!

[viT-1]

@Jakobud But with modificators realised as separate custom attributes you get such vebose tag markup as BEM!

[jacobxperez]

@geelen @Jakobud @viT-1 @benschwarz I have been looking around the web about using data attributes for styling components and came across your discussion. I also came to a similar conclusion as you guys did but I think I went all the way with the idea of using data attributes instead of classes and created Rams a framework with zero classes and pure data attributes glory. I have been looking for a community that understands this stuff please let me know what you guys think about Rams, I need more feedback.

[viT-1]

@jacobxperez I wrote iam-css documentation with samples. May be you find it useful for some ideas.

[jacobxperez]

@viT-1 Thanks I'll take a look at your work. This type of projects are great I feel like there is a lot of potential in data attributes that hasn't been tapped yet.