Alice - 寫CSS的更好方案

jopen 10年前發布 | 19K 次閱讀 Aliec CSS 前端技術

Alice 是什么

Alice 是漫游仙境的童話女神,是支付寶的樣式解決方案,是一套精選的基于 CMD 生態圈的樣式模塊集合,是 Arale 的子集,也是一套模塊化的樣式命名和組織規范,是寫 CSS 的更好方式。

她包括了一套通用樣式模塊庫,一個模塊化樣式構建規范,一組幫助書寫和組織樣式的工具,以及產出更多 Alice 模塊和樣式庫的完善方案。

Alice - 寫CSS的更好方案

圖片來自 meago

Alice 的特點

  1. 模塊化的命名和組織方式。

    基于 CMD 生態圈,使用了Alice 命名規范,以模塊的方式組織樣式。

  2. 強大的工具支持。

    Alice 使用了 spmnicoPeaches 等實用的工具幫助開發樣式。

  3. 使用 iconfontCSS3 技術。

    我們推崇純色和簡單漸變的視覺效果,Alice 的通用樣式模塊一律不使用背景圖片來實現, 而是使用了 iconfont 和漸進增強的 CSS3 技術,視覺上有更好的適應性和現代感,并且支持 Retina 屏幕, 而在低端瀏覽器下只保證了基礎的視覺支持(比如沒有圓角)。

    不使用圖片的另一個好處是可以在頁面中大膽使用通用模塊而不用擔心請求數過多影響性能。

    注:一切必須用背景圖片才能實現的視覺效果都是耍流氓。

  4. 提供了樣式開發方案。

    Alice 不僅僅是一套前端精選模塊集,她為寫樣式提供了一套更好的方案, 你能夠很容易基于她的體系來產出屬于自己和團隊的模塊和樣式庫。

  5. 完整的前端開發體系。

    Alice 是 Arale 的子集,她完善和補充了 Arale 中對于樣式的解決方案。在背后有著 Arale 的強大支持, Alice 的樣式模塊也能做更多事情。

兼容性

嚴正聲明,我們不支持 IE5.5 或更早的版本!

Alice 基于支付寶的實際需求產出了一套通用樣式模塊,因此這些模塊仍然需要支持 IE6/7 , 但不拘泥在低級瀏覽器上的視覺效果(我們討厭它們,所以把視覺弄得很丑)。

和 Arale 的關系

Alice 是 Arale 的子集,是原有的 Arale 體系中對樣式的補充。 使用 Alice 的樣式規范和工具開發出來的樣式很容易和 Arale 的 JavaScript 的模塊配合。

什么,對 Arale 不熟悉?可以先訪問下 Arale 的官網



 

項目主頁:http://www.baiduhome.net/lib/view/home/1415693124461

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!