Class is meant for CSS

I have written a lot of JavaScript code like this

1
2

$(".product_pictures .actions .delete").on "click", ->
  do_something_useful

The problem with above code is that class names in the html markup was meant for web design. By using css class for functional work, I have made both the design team and the front end development team perpetually terrified of change.

If designer wants to change markup from

1

<div class='first actions'>xxx<div>

to

1

<div class='first actions-items'>xxx<div>

they are not too sure what JavaScript code might break. So they work around it.

Same goes for JavaScript developers. They do not want to unintentionally remove a class element otherwise the web design might get messed up.

There has to be a better way which clearly separates the design elements from functional elements.

data-behavior to rescue

“Nick Quaranto” of 37Signals presented “Code spelunking in the All New Basecamp” ( video blog ) . In his presentation he mentioned about data-behavior .

data-behavior usage can be best understood by an example.

1
2

# no data-behavior
$(".product_pictures .actions .delete").on "click", ->

1
2

# code with data-behavior
$('[data-behavior~=delete-product-picture]').on 'click', ->

The html markup will change from

1

 <%= link_to '#', class: 'delete', "data-action-id" => picture.id do %>

to

1

<%= link_to '#', class: 'delete', "data-action-id" => picture.id, 'data-behavior' => 'delete-product-picture' do %>

Now in the above case the designer can change the css class all he wants and it will have no impact on JavaScript functionality.

More usage of data-behavior

Based on this data-behavior approach I changed some part of nimbleShop to use data-behavior. Here is the commit.

Personally I am surprised at people using old style of development. data-behavior is a very simple and effective tool to combat the problem of having clear separation between designer elements and JavaScription functional work.