团队高效简洁的CSS-周炜.ppt

团队高效简洁的CSS,周炜 2014年04月,2,现状 Alice的解决方式 Alice介绍,内容：,3,现状混乱的命名,myorder 和 我的信息？,4,现状低效的写法,重复的样式定义，低效！,5,现状糟糕的维护,相关联的样式被隔开,6,Alice,7,解决命名混乱表意的命名,Alice命名要求表意，模块的命名表示它具体的功能含义,ui-button : 按钮,ui-tab : 标签页,ui-paging : 分页,8,解决书写低效合并相同属性样式,Alice要求合并相同的样式，当各个样式有单独的属性时，再分离出另写。,把两个样式的公用部分定义成basebtn，然后针对它们不同的样式再单独设置,9,提升维护性聚拢的样式块,Alice要求相关的样式书写时应该聚拢在一起，避免不相关的样式混杂在一起。,把所有相关的button样式代码都写在一块，达到聚拢的样式效果，从而提升代码的维护性。,10,提升维护性采用继承,通过类似Java继承的方式对模块的样式进行扩展,通过ui-button-lorange来完成样式的继承扩展,11,Alice介绍,12,Alice简介,Alice是支付宝样式解决方案，是一套模块化的样式命名和组织规范。 Alice 的样式组织分为两个层级： 基础框架（base.css +iconfont + 栅格 + animate.css + 常用样式类） 通用模块（alice.css）,13,由于不同浏览器缺省的样式各不相同，导致相同的页面设计和实现在不同的浏览器上展现不同这是最常见的兼容性问题。而base.css的目的就是解决该问题。,Alice基础框架base.css,Alice基础框架iconfont,直接引用icon,把icon拼接到一张图上，使用sprite技术,使用iconfont技术,大部分网站的做法是采用雪碧图（CSS Sprites ），把这些图标放在一张单独的图中，结合使用CSS的background和background-position属性渲染图标。,最传统的方式,iconfont提供了一种通过把icon图标打包成矢量化字体的方式对图标进行管理。,优点： 轻薄：使用icon图片的大小是字体的4-10倍。 百搭：矢量化，在不同的分辨率屏幕上适配缩放不失真！,Alice基础框架iconfont的优点,怎么使用？ data-icon font-family,栅格化开发为我们提供了标准化的协作开发流程，设计师按照Grid栅格设计,开发人员采用Grid栅格方式高度还原设计； 栅格化隐藏了复杂的BOXModal细节，为开发者提供了更加高效容易的布局方式，即使不懂CSS，也能写出栅格布局。,Alice基础框架Grid栅格,通过CSS3的高级属性实现动画交互，没有使用JavaScript。 和CSS3特性相关的样式被单独剥离为animate.css，解决了浏览器的兼容问题。,Alice基础框架动态样式,常用功能类以fn为前缀，为了在页面中更加容易的重复使用，命名采用了以面向属性的命名方式 比如：fn-clear，fn-hide等,Alice基础框架常用功能类,Alice提供了符合样式规范的常用组件样式库，通过样式库可以有效的规范代码的质量； Alice的通用样式库包括： ui-button ui-nav ui-tipbox ui-step .,Alice通用模块主样式表,Alice通用模块模块的组合,Head：ui-grid-25 Content：ui-grid-8,ui-grid-8,ui-grid-9,Head：ui-nav Content：ui-box ui-form，ui-list， ui-button,Alice的使用,1，引入Alice样式文件,2，使用Alice提供 的 HTML代码,只需引入一个alice.css样式，你就能编写漂亮页面。 重置样式表让所有浏览器都听话。 iconfont字体代替图片，节省流量、矢量化。 grid栅格让布局更为简单容易。 animate.css让你随心使用css3炫酷效果。