Shaun O'Connell

That's the beauty of the data-* attribute, you can pick whatever name you want for the attribute.
And, with non-XHTML doctypes such as the default flavour of HTML5, you can leave the attribute value-less and the document will still be valid

e.g.

<a class="button" data-js-test>Buy now!</a></code></pre>
...could be interrogated using just the attribute name's existence:
$('[data-js-test]')...</code></pre>

JS classname prefixes are a great idea for separating behavioural modifications from style modifications, but what about using a data-* attribute rather?
It'll keep the use of classes explicitly for styling. On top of this, you could use another data-attribute for any further variables, without polluting the classnames.

e.g.

<a href="/buy" class="button btn_primary" data-metric-type="button">Buy now</a></code></pre>

Why not just set the color on the parent container?
See: http://codepen.io/ndorfin/pen/mdFyp