团队高效简洁的

团队高效简洁的2023/4/20第1页，共23页，2023年，2月20日，星期五现状Alice的解决方式Alice介绍内容：1232第2页，共23页，2023年，2月20日，星期五现状——混乱的命名myorder和我的信息？3第3页，共23页，2023年，2月20日，星期五现状——低效的写法重复的样式定义，低效！4第4页，共23页，2023年，2月20日，星期五现状——糟糕的维护相关联的样式被隔开5第5页，共23页，2023年，2月20日，星期五Alice6第6页，共23页，2023年，2月20日，星期五解决命名混乱——表意的命名Alice命名要求表意，模块的命名表示它具体的功能含义ui-button:按钮

ui-tab:标签页

ui-paging:分页

7第7页，共23页，2023年，2月20日，星期五解决书写低效——合并相同属性样式Alice要求合并相同的样式，当各个样式有单独的属性时，再分离出另写。把两个样式的公用部分定义成basebtn，然后针对它们不同的样式再单独设置8第8页，共23页，2023年，2月20日，星期五提升维护性——聚拢的样式块Alice要求相关的样式书写时应该聚拢在一起，避免不相关的样式混杂在一起。把所有相关的button样式代码都写在一块，达到聚拢的样式效果，从而提升代码的维护性。9第9页，共23页，2023年，2月20日，星期五提升维护性——采用继承通过类似Java继承的方式对模块的样式进行扩展通过ui-button-lorange来完成样式的继承扩展10第10页，共23页，2023年，2月20日，星期五Alice介绍11第11页，共23页，2023年，2月20日，星期五

Alice简介Alice是支付宝样式解决方案，是一套模块化的样式命名和组织规范。Alice的样式组织分为两个层级：基础框架（base.css+iconfont+栅格+animate.css+常用样式类）通用模块（alice.css）12第12页，共23页，2023年，2月20日，星期五由于不同浏览器缺省的样式各不相同，导致相同的页面设计和实现在不同的浏览器上展现不同——这是最常见的兼容性问题。而base.css的目的就是解决该问题。

Alice基础框架——base.css13第13页，共23页，2023年，2月20日，星期五

Alice基础框架——iconfont直接引用icon把icon拼接到一张图上，使用sprite技术使用iconfont技术大部分网站的做法是采用雪碧图（CSSSprites），把这些图标放在一张单独的图中，结合使用CSS的background和background-position属性渲染图标。最传统的方式iconfont提供了一种通过把icon图标打包成矢量化字体的方式对图标进行管理。第14页，共23页，2023年，2月20日，星期五优点：轻薄：使用icon图片的大小是字体的4-10倍。百搭：矢量化，在不同的分辨率屏幕上适配缩放不失真！

Alice基础框架——iconfont的优点怎么使用？data-iconfont-family第15页，共23页，2023年，2月20日，星期五栅格化开发为我们提供了标准化的协作开发流程，设计师按照Grid栅格设计,开发人员采用Grid栅格方式高度还原设计；栅格化隐藏了复杂的BOXModal细节，为开发者提供了更加高效容易的布局方式，即使不懂CSS，也能写出栅格布局。

Alice基础框架——Grid栅格第16页，共23页，2023年，2月20日，星期五通过CSS3的高级属性实现动画交互，没有使用JavaScript。和CSS3特性相关的样式被单独剥离为animate.css，解决了浏览器的兼容问题。

Alice基础框架——动态样式第17页，共23页，2023年，2月20日，星期五常用功能类以fn为前缀，为了在页面中更加容易的重复使用，命名采用了以面向属性的命名方式比如：fn-clear，fn-hide等

Alice基础框架——常用功能类第18页，共23页，2023年，2月20日，星期五Alice提供了符合样式规范的常用组件样式库，通过样式库可以有效的规范代码的质量；Alice的通用样式库包括：ui-buttonui-navui-tipboxui-step...

Alice通用模块——主样式表第19页，共23页，2023年，2月20日，星期五

Alice通用模块——模块的组合Head：ui-grid-25Content：ui-grid-8,ui-grid-8,ui-grid-9Head：ui-navContent：ui-boxui-form，ui-list，ui-button第20页，共23页，2023年，2月20日，星期五

Alice的使用1，引入Alice样式文件2，使用Alice提供的HTML代码第21页，共23页，2023年，2月20日，星期五只需引入一个alice.css样式，你就能编写漂亮页面。重置样式表让所有浏览器都听话。iconfont字体代替图片，节省流量、矢量化。grid栅格让布局更为简单容易。animate.css让你随心使用css3炫酷效果。以常用功能类为辅助让代码更加简洁。基于模块化让代