October 10, 2012 -
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.
Class is meant for CSS
If designer wants to change markup from
There has to be a better way which clearly separates the design elements from functional elements.
data-behavior to the rescue
“Nick Quaranto” of 37Signals
presented “Code spelunking in the All New Basecamp”
( videoblog ) .
In his presentation he mentioned data-behavior .
data-behavior usage can be best understood by an example.
The html markup will change from
Above code would produce html code something like this
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.
Code snippet for reference
Over the period of time we have used this technique in many projects successfully. However sometimes I need to spend a while to find the right way to add data-behavior.
I’m adding some code snippet so that I can find them here when I need them.