I tend to be pretty picky in following the spec and only use HTML data-* attributes for actually passing data. That being said, I think it’s mainly a matter of personal preference. If the data-* attributes method makes more sense to you and your team, by all means use it.

I should note, though, that if performance is a concern, traversing the DOM for classes is significantly faster than for attributes. Here’s a jsperf example I put together a while back comparing the two: http://jsperf.com/class-vs-data-attribute-selector-performan...

Lastly, it's worth pointing out that it is still possible to style elements with attributes in CSS, so the data-* attribute approach doesn't actually prevent coupling between style and behavior, it's just another convention (like js-* prefixed classes). In both cases it's still up to you to enforce the convention.