Wow, there are a lot of strong opinions in here! :D
Personally I get a lot of use out of custom data attributes for styling purposes! Not only are you able to use the values held by attributes in CSS with attr(),like if you have data-tooltip="Tip here" on an element you can quite easily say: [data-tooltip]:after { content: attr(data-tooltip); } — but that's not even the main reason I do it.
The biggest reason I use custom data attributes for styling is that it's like creating your own namespace for the values you're about to use. If you're adding buttons to a website, there's a decent chance a class name like .button or .btn already exist and are defined as something, but the odds are a lot smaller that a website you need to add buttons to will already have a [data-button] defined. Same with .button.blue versus [data-button=blue] too.
Over time we ended up using custom data attributes at the 'component' level to identify components, then when we use classes we're almost always qualifying it with the name of the component its in. So on our sites you might have a rule for [data-widget] .headline and [data-article] headline, but you wouldn't have a rule for .headline sitting around (does that make sense?).
Here's an example of a set of buttons I've used on literally hundreds of different pages, I've gotten a lot of use out of them, and part of the reason why is because you can quite literally drop these into any website and they Just Work™. You style any element like a button by adding [data-button] and there are colours to choose from: green, red, blue, grey, outline. But there's also a semiflat style as well that can be combined with any color, for combinations like [data-button="red semiflat"] .
Using data attributes for styling is an excellent idea - and the fact that data attributes can be set and have values added or altered by JavaScript only makes them _more versatile. _Classes are great, but why limit yourself to picking names in just the class="" attribute alone, when you can have unlimited names in unlimited attributes :D
I have dozens more examples, but I wonder what any of the people saying not to use data attributes would give you as an example that they aren't useful :P
(EDIT: I'll just add that we didn't set out to use data attributes, nor did we especially want to use them, but when you have the same snippets of code to add to multiple websites and you have to keep changing the classes and selectors over and over, well eventually we used data attributes somewhere and it stuck. And then for our other snippets after changing from class to class to class…if we switched them to a data attribute instead…that's the form they're still in today. It was a few years of 'ending up as' data attributes before we started intentionally naming things this way from the outset. I think before we settled on [data-button] the original orange button started life as .button.start-it, as well as .button.send-it, became .cta-button, .RFIbutton, .orangebutton, and even more, before eventually becoming [data-button])