CUBE: why data-attributes?

Hi @hankchizljaw, I was having a conversation with some pals over on Chris Ferdinandi’s Slack community about CUBE. I was admiring the use of data-attribute but someone else asked why? Which is a valid question. Why not card--reversed or state-reversed classes, for instance?

You do mention in the article:

This provides a useful hook for both CSS and JavaScript!

Is this the main reason or is there some deeper philosophy or practical reason behind this choice?


It’s mainly the potential of shared state, because that is what an exception is: a deviation of the initial state. Having a clear deviation from the block, by using data attributes helps with that, too.


I like the clear distinction using data attribs brings too. Feels like it’s using HTML (and CSS and JS) more to full potential. Why not? Feels good to me.

1 Like

Yeh exactly this. The distinction is crucial when things are getting pretty complex!