本來是想介紹Semantic-UI的，但如果只介紹這個框架，沒什么內容，框架相關feature站點上有不需要說，所以干脆列出自己常用的幾個前端框架，算是做個階段性總結。
本文的核心是側重於HTML/CSS的框架，JS框架或以JS為核心的框架不討論(比如YUI)；多屏已是既定事實，雖然不是所有開發都要考慮自適 應，但有自適應功能至少說明了這框架短期內不會被淘汰，所以不帶自適應功能的框架不討論(比如flaminwork)；非開源、不可商用，或是需要付費的 框架不討論(比如easyframework)。
先說Bootstrap，這兩年都在用它，如今 Bootstrap有點爛大街了，難免有些審美疲勞。但想想在Bootstrap這種框架出現之前，程序員做的界面實在是慘不忍睹，如今至少升級成“還能 看”的級別了，所以“泛濫”這個問題是瑕不掩瑜的。平時開發個小工具用它來做界面，寫個底層腳本用它來做文檔界面，工作環境中也可以用來做原型或是布局， 誰都看得懂沒什么學習成本。總體來說，這個框架對於互聯網的美化實在是功不可沒。
Bootstrap的優點是拿來就能用，節省時間。缺點是class滿天飛（也許你看到這篇文章的時候它已經變好了但不影響我現階段的吐槽），而且不夠語義化，也不適合做定制——最多改改顏色，如果對自適應有定制需求可以考慮用Foundation來 替代。這個框架我最初是用來寫產品原型的(這個用途現在已經被Bootstrap替代了)，結果到3.0版Foundation更改Title為“全世界 最先進的前端自適應框架”(most advanced responsive front-end framework in the world)，是否最先進有待商榷，但它在自適應方面的定制性確實比Bootstrap好，Bootstrap有的控件它都有。
我沒在生產環境中用過Foundation，12年6月它由原型工具轉型成前端框架時，Bootstrap已經很流行了，有Twitter做技術后 盾，不太可能說服程序員轉向Foundation。現在的4.0版本用Zepto替換了jQuery，如果項目中在用Zepto可以考慮用它代替 Bootstrap。
接下來才是本文的重點——Semantic-UI。這名字就是它最主要的賣點了：語義化。Semantic-UI比Bootstrap更語義化，使 用了更容易理解的標簽名稱：導航的是nav，主要內容的是main，class名也很明確，而且不像Bootstrap需要套很多層。Bootstrap 很通用，兼容性很好，甚至能兼容低版本的IE，Semantic-UI則更Geek，有不少CSS3的特性，比如Shape和Reveal就很有趣。從界面設計風格來說，Semantic比Bootstrap(2)更扁平化：
這些特性都很fancy，但我現在用Semantic-UI替換Boostrap，主要是因為它的JS插件(Modules)更容易操作，預設了一些常用動畫，視圖(Views)中的評論(Comment)和動態信息(Feed) 實在是幫了大忙。反正我需要用到的Bootstrap功能它都有，於是歡樂的更換了Semantic-UI。大多數的樣式效果Semantic-UI都比 Bootstrap代碼量少，在相同的熟練程度下開發起來比Bootstrap快。而且提供多種主題，一定程度上避免了Bootstrap千站一面的問 題。
再找找缺點，我剛開始用的時候，被Semantic-UI的Grid坑 過。自適應的問題，bootstrap通過md/sm/xs定義在不同屏幕寬度下的顯示，雖然麻煩，但容易控制。Semantic-UI是用 Stackable/Doubling來實現，而且還能手動調整，不知不覺就被玩壞了。似乎這個框架的設計接近Ruby的哲學而不是Python的，同一 個需求有多種方式來實現，比如我要實現列表，可以用List或是Items；要實現側邊欄，可以用Rail或是Grid，選擇多了有時候也是很糾結的問 題。還有，Semantic-UI完整的庫文件很大，JS+CSS文件有接近500kb的大小，考慮到國內的網速，這個體積顯得有些龐大了。可以用 NodeJS自己build，前提是清楚每個組件具體是干嘛。
以上框架適合擅長實現功能(前端的JS以及后台相關交互)但不擅長設計的程序員，用以上框架可以快速做出一個不錯的Web界面。另一種場景是自己會設計，或是由專業設計師出設計，再轉成HTML/CSS，上述框架就太重了，很多功能用不上。
這種情況我通常只需要框架來做布局(Grid)，10年寫過一篇文章介紹網頁設計多用960px寬度的原因，當時還在用960gs，但自適應的需求960gs滿足不了，就用了一段時間的lessfreamwork。最近960gs的作者開發了unsemantic，於是又換成了unsemantic。在編寫自適應網頁時，要根據設備的不同加載不同的css文件，unsemantic都替你切分好了，省時省力。
最后得說說Topcoat，可以認為 Semantic-UI - unsemantic = Topcoat。有時候只需要一個單頁面，甚至都不需要導航條，我是用Topcoat+布局類框架來做的。Topcoat可以讓各類頁面元素更美觀，純css實現，文件小，更靈活也更容易定制。
以上，再次強調本文的目的是布道用，在開發個人項目的程序員們可以考慮嘗試Semantic-UI，前端框架的更換風險小，有更多地小白鼠，不，實際用戶之后才更利於這個框架被用於生產環境中。需要例子可以參考：Erya - 基於SemanticUI + Django的內容發布系統，DEMO地址是: http://bbs.dmyz.org/
http://dmyz.org/archives/548