Classnames for styling, data attributes for behavior

remcoder:

a.k.a. “classy behavior with data attributes”

For a while I’ve been using a rule-of-thumb that I’d like to share with you. Basically, when attaching behavior to html elements, in the form of event handlers and such, I use data-attributes to identify elements rather than classnames.

Example

Say…

Classnames for styling, data attributes for behavior