未來，可能會用前端分離術

最近 hellolucky 分享了好文 Ruby on Rails 重構經驗談 ，裡面關於前端的部分提醒我該寫一篇文章整理一下最近的閱讀心得，不然最近居然整天都在畫wireframe沒有code可以實踐，新技術都要忘光了。

1. 關於CSS

文章提到HTML裡用很多class會讓view看起來很雜亂。確實，因為舉的例子實在太差了：

class="button red warnning delete"

尤其是red這種直接描述視覺的class是最差的class了，最好的class應該是描述那個視覺代表的意義（而非該HTML tag的語義），例如後面提到的 delete-button。但是一個HTML tag上有多個class本身不是錯的，最近幾位CSS大神在推廣的模組化CSS寫法像是 OOCSS 以及 SMACSS ，都是用多個CSS的模組在HTML上組合出外觀。以下是OOCSS裡面的例子：

class="mod simpleExt"
class="mod noted"

受限於CSS的能力，HTML上你需要寫出多個CSS的「模組」。除非你用上Sass或是LESS，才能（很方便的）把多個class結合成一個，就沒有這個問題了。

2. 關於JavaScript

以往JavaScript和CSS都要透過id或是class和HTML產生關聯，造成典型的問題就是一個CSS的style用不到了，但是怕刪除class讓JS失效。正如原文所說：

Javascript和CSS都會使用到id和class，如果不能簡單化對trace code也會有一定的阻礙！

如果都會用到會造成問題的話，乾脆就不要用了吧！沒錯，目前最新的解法是：JavaScript完全不要用id和class了。

在這篇 Unobtrusive JavaScript 裡面介紹，他們改用 HTML5 data- attributes 來當JS和HTML之間的橋梁，這樣除了和CSS徹底分離外，還有以下好處：

Avoids duplication of JS code by having a single event-handler on the document Avoids expensive DOM searches when the page loads Automatically handles elements that are dynamically added to the DOM Separates HTML markup from JS behavior, but provides means to configure widgets via data-* attributes

3. 實際案例

那有沒有真實的例子使用以上「最新的技術」呢？有，那就是當紅的Twitter Bootstrap！

Twitter Bootstrap的CSS class的寫法是 SMACSS ](http://smacss.com/) 的風格：

class="nav nav-tabs"
class="nav nav-pills"

Twitter Bootstrap 的JavaScript 用法在文件也是「Via data attributes」排在第一個的。例如：

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

所以，Twitter Bootstrap不只是方便，其實架構也蠻先進的。或者反過來說，因為有用到這些架構，讓他非常方便的使用也是Twitter Bootstrap受歡迎的原因之一吧。