This describes the thinking here: http://robots.thoughtbot.com/decoupling-data-from-presentation
The idea is that developers could use the data attributes to specify behavioral things (integration with JS), while designers would be free to change the tags and classes as they see fit for design. Some people really like this approach, but in practice I didn’t like it much.
The data-attribute selectors are clunkier and longer and we ended up using the data attributes for styling as well as we often want to ensure we are talking about exactly the same element in design and development. I’d prefer to stick to classes, perhaps prefixing with
js- if we need to differentiate between behavior and style.