阿里前端框架Alice是个不错的选择

BootStrap虽然用户群体广大,其整体风格尽管有不少skin可选,但以国情来看还是不好看。

阿里开源的前端框架,个人觉得还是很不错,Alice处处透着支付宝中界面风格的气息,电商感挺强。

以下内容摘自:

Alice 的样式模块组织方式追求扁平化的方式,分为三个层级:

基础框架(reset + iconfont + 栅格)

通用模块(符合 Alice 规范的样式模块)

页面样式(继承通用模块)

什么是模块化的样式

Alice 对于模块化样式的理解是任何模块在页面上都应该像一个盒模型,不和页面的其他元素互相影响。 完美的 Alice 模块应该是一个“口”字型结构。比如 box 模块:

阿里前端框架Alice是个不错的选择

ui-box 模块能够嵌到页面上任何一个位置,box 内部也能够嵌入别的模块(如图中的 ui-list 模块),它们之间不会互相影响。

怎样才能写出模块化的样式

一种简单的方式是使用 Alice 的类命名规范,当团队中都能采用这种方式书写样式,就能很好地避免样式冲突。 在模块化和命名上,以一个 Tab 模块为例,分解如下:

阿里前端框架Alice是个不错的选择

值得注意的是:

模块名是必选的。

名字要求是表意的,一眼就基本能看出模块是做什么的。

模块内部的类名继承于上层的名称。

比如:

<div class="ui-box"> <h3 class="ui-box-title"></h3> <p class="ui-box-conent"></p> </div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzgfgd.html