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 making any 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 the functional elements.
data-behavior usage can be best understood by an example.
The html markup will change from
Above code would produce html looking 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.