html5 data-attribute

以往JavaScript和CSS都要透過id或是class和HTML產生關聯，
造成典型的問題就是一個CSS的style用不到了，
但是怕刪除class讓JS失效.
目前最新的解法是：JavaScript少class。
改用 HTML5 data- attributes 來當JS和HTML之間的橋梁
Twitter Bootstrap:
css => class="nav nav-tabs"
js    =>

優點:
1.可以定義一些不需要顯示在前端的資訊(ex:id)
2.分離js , html ,css

ref:
https://www.christianheilmann.com/2012/10/10/data-attributes-rock-as-both-css-and-javascript-know-them/

http://minipai.tumblr.com/post/34152230626/%E6%9C%AA%E4%BE%86%E5%8F%AF%E8%83%BD%E6%9C%83%E7%94%A8%E5%89%8D%E7%AB%AF%E5%88%86%E9%9B%A2%E8%A1%93

http://sincode.blogspot.tw/2014/09/html5-data-data.html

https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/