18 9 / 2012

classnames for styling, data attributes for behavior

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.


Say we have a button that will display an alert:

.action-button {
  font-size: 120%;
  border-radius: 5px;
  background-color: red;

<button data-role='show-alert' class="action-button">
  click me

        .click(function() { alert('you clicked me!'); });

Here, style is applied to the classname .action-button, while the behavior is applied to every element with the attribute/value pair [data-role='show-alert'].

Separation of concerns

What this demonstrates is that the style and behavior of the button are applied independently: You can change classnames without affecting the behavior and you can change the data-roles without affecting the styling. This can be quite an advantage, especially in larger teams.

Use any data-* attribute

The example uses the custom data-role attribute, which is what we use in our team. This was somewhat inspired by the jQuery Mobile framework. You can pick a different attribute, if you like, but whatever you do don’t use any pre-defined ones like role. These attributes have their own specific semantics and are not for you to use freely. Rather, make use of the data attributes as defined by html5 which are yours to embed custom data with.

For more information about the role attribute, see the WAI-ARAI specs.

jQuery plugin

I wrote dataroles.js (a jQuery plugin) that adds some extra functions like $.findByRole(role) to make all this a little easier. It assumes the data-role attribute. Check the repo for the features.

Other libraries based on this principle

  • role.js
    extends css selector syntax, can be used w/o jQuery, uses the role attr.
  • please let me know if you know any others