BootStrap雖然用戶群體廣大，其整體風格盡管有不少skin可選，但以國情來看還是不好看。
阿里開源的前端框架，個人覺得還是很不錯，Alice處處透着支付寶中界面風格的氣息，電商感挺強。
以下內容摘自：http://aliceui.org/docs/rule.html
Alice 的樣式模塊組織方式追求扁平化的方式，分為三個層級：
-
基礎框架（reset + iconfont + 柵格）
-
通用模塊（符合 Alice 規范的樣式模塊）
-
頁面樣式（繼承通用模塊）
什么是模塊化的樣式
Alice 對於模塊化樣式的理解是任何模塊在頁面上都應該像一個盒模型，不和頁面的其他元素互相影響。 完美的 Alice 模塊應該是一個“口”字型結構。比如 box 模塊：
ui-box 模塊能夠嵌到頁面上任何一個位置，box 內部也能夠嵌入別的模塊（如圖中的 ui-list 模塊），它們之間不會互相影響。
怎樣才能寫出模塊化的樣式
一種簡單的方式是使用 Alice 的類命名規范，當團隊中都能采用這種方式書寫樣式，就能很好地避免樣式沖突。 在模塊化和命名上，以一個 Tab 模塊為例，分解如下：
值得注意的是：
-
模塊名是必選的。
名字要求是表意的，一眼就基本能看出模塊是做什么的。
-
模塊內部的類名繼承於上層的名稱。
比如：
<div class="ui-box"> <h3 class="ui-box-title"></h3> <p class="ui-box-conent"></p> </div>不要這樣寫，很容易造成命名上的沖突。
<div class="ui-box"> <h3 class="title"></h3> <p class="conent"></p> </div>
-
在模塊 DOM 結構的最外一層添加狀態，而非給每一個內容添加狀態。除非內容有獨立的狀態。
比如，我們可以這樣寫：
<div class="ui-box ui-box-hover"> <h3 class="ui-box-title"></h3> <p class="ui-box-content"></p> </div>但不要這樣寫：
<div class="ui-new"> <h3 class="ui-box-title ui-box-title-hover"></h3> <p class="ui-box-content ui-box-content-hover"></p> </div>
充分考慮標簽的語義化
語義化是什么？什么樣的寫法才是正確的。這里給一個建議，把你將要構建的頁面當成一本書。 是段落的，你就用 P(aragraph)；是標題的，就用 H(eader)；是引用的，就用 Blockquote。 而不是簡單的，塊狀的東西由塊狀元素包含，行內的元素用行內的標簽包含。 這里有點要求就是， 去深入了解每個 HTML 標簽的用法。
Alice 類命名規范
-
模塊名
盡量讓人看到名字就能知道是什么模塊，比如 ui-tab， ui-nav 這樣的命名。（反例：
ui-shit） 用 HTML ENTRY 來引用，不要寫空標簽，應使用 HTML ENTRY 來替代，以達到語義化的要求。 HTML ENTRY 請參考這個文檔：https://docs.google.com/Doc?docid=0AWiI12yCmwaoZGNiemJqOGpfMTVmaHZtOWNkeg -
模塊整體狀態 = 模塊名 + 狀態
常用狀態有：hover, current, selected, disabled, focus, blur, checked, success, error 等。通常你的命名應該看起來像 .ui-name-hover, .ui-name-error 這樣。 -
子模塊 = 模塊名 + 子模塊名
常用模塊名有：cnt(content)，hd(header)，text(txt)，img(images/pic)，title，item，cell 等， 只要詞義表達了組件要實現的功能或者要表現出來的的外觀就可以了。
-
子模塊狀態 = 模塊名 + 子模塊名 + 狀態
參照常用狀態。
命名注意：
-
模塊嵌套：大模塊可有子模塊命名。
拿支付寶某項目中的的 .ui-nav 為例，如果有多級，可以這樣命名：
ui-nav > ui-subnav(ui-nav的子類) > ui-list(嵌套進去的其他模塊)
<ul class="ui-nav"> <li class="ui-nav-item"> <a href="#">nav Triggle Link</a> <ul class="ui-subnav"> <li class="ui-subnav-item"> <a href="#">subNav Triggle Link</a> <ul class="ui-list"> -
統一命名風格：
比如你比較喜歡 ui-tip-container ，另外的一個相同作用的地方，就不要寫 ui-message-cnt 了， 用
ui-tip-container ui-message-container會是更好的選擇。
命名規范的最后
說了這么多，其實簡單就是一句話，用 - 來做命名空間上的區隔，最小化兩個模塊之間的命名沖突。
這種模塊化的命名方式會很好地避免樣式之間的沖突，特別推薦在團隊中使用， 可以參考 box、nav 這些按照 Alice 命名規范實現的通用模塊。
在 Alice 中，第一個 ui- 是作為通用模塊的標識，你可以選取其他前綴來分類你的模塊。
我們一共占用了兩個前綴
ui-、fn-，各業務線可以選取自己的前綴。