Alice - 寫CSS的更好方案
Alice 是什么
Alice 是漫游仙境的童話女神,是支付寶的樣式解決方案,是一套精選的基于 CMD
生態圈的樣式模塊集合,是 Arale 的子集,也是一套模塊化的樣式命名和組織規范,是寫 CSS
的更好方式。
她包括了一套通用樣式模塊庫,一個模塊化樣式構建規范,一組幫助書寫和組織樣式的工具,以及產出更多 Alice 模塊和樣式庫的完善方案。
圖片來自 meago。
Alice 的特點
-
模塊化的命名和組織方式。
基于
CMD
生態圈,使用了Alice 命名規范,以模塊的方式組織樣式。 -
強大的工具支持。
Alice 使用了
spm
、nico
、Peaches
等實用的工具幫助開發樣式。 -
使用
iconfont
和CSS3
技術。我們推崇純色和簡單漸變的視覺效果,Alice 的通用樣式模塊一律不使用背景圖片來實現, 而是使用了
iconfont
和漸進增強的CSS3
技術,視覺上有更好的適應性和現代感,并且支持Retina
屏幕, 而在低端瀏覽器下只保證了基礎的視覺支持(比如沒有圓角)。不使用圖片的另一個好處是可以在頁面中大膽使用通用模塊而不用擔心請求數過多影響性能。
注:一切必須用背景圖片才能實現的視覺效果都是耍流氓。
-
提供了樣式開發方案。
Alice 不僅僅是一套前端精選模塊集,她為寫樣式提供了一套更好的方案, 你能夠很容易基于她的體系來產出屬于自己和團隊的模塊和樣式庫。
-
完整的前端開發體系。
Alice 是
Arale
的子集,她完善和補充了 Arale 中對于樣式的解決方案。在背后有著 Arale 的強大支持, Alice 的樣式模塊也能做更多事情。
兼容性
嚴正聲明,我們不支持 IE5.5
或更早的版本!
Alice 基于支付寶的實際需求產出了一套通用樣式模塊,因此這些模塊仍然需要支持 IE6/7
, 但不拘泥在低級瀏覽器上的視覺效果(我們討厭它們,所以把視覺弄得很丑)。
和 Arale 的關系
Alice 是 Arale 的子集,是原有的 Arale 體系中對樣式的補充。 使用 Alice 的樣式規范和工具開發出來的樣式很容易和 Arale 的 JavaScript 的模塊配合。
什么,對 Arale 不熟悉?可以先訪問下 Arale 的官網。