团队高效简洁的CSS-周炜

《团队高效简洁的CSS-周炜》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、团队高效简洁的CSS周炜2014年04月现状Alice的解决方式Alice介绍内容：1232现状——混乱的命名myorder和我的信息？3现状——低效的写法重复的样式定义，低效！4现状——糟糕的维护相关联的样式被隔开5Alice6解决命名混乱——表意的命名Alice命名要求表意，模块的命名表示它具体的功能含义ui-button:按钮ui-tab:标签页ui-paging:分页7解决书写低效——合并相同属性样式Alice要求合并相同的样式，当各个样式有单独的属性时，再分离出另写。把两个样式的公用部分定义成basebtn，然后针对它们不同的样式再单

2、独设置8提升维护性——聚拢的样式块Alice要求相关的样式书写时应该聚拢在一起，避免不相关的样式混杂在一起。把所有相关的button样式代码都写在一块，达到聚拢的样式效果，从而提升代码的维护性。9提升维护性——采用继承通过类似Java继承的方式对模块的样式进行扩展通过ui-button-lorange来完成样式的继承扩展10Alice介绍11Alice简介Alice是支付宝样式解决方案，是一套模块化的样式命名和组织规范。Alice的样式组织分为两个层级：基础框架（base.css+iconfont+栅格+animate.css+常用样式类）通用

3、模块（alice.css）12由于不同浏览器缺省的样式各不相同，导致相同的页面设计和实现在不同的浏览器上展现不同——这是最常见的兼容性问题。而base.css的目的就是解决该问题。Alice基础框架——base.css13Alice基础框架——iconfont直接引用icon把icon拼接到一张图上，使用sprite技术使用iconfont技术大部分网站的做法是采用雪碧图（CSSSprites），把这些图标放在一张单独的图中，结合使用CSS的background和background-position属性渲染图标。最传统的方式iconfont提

4、供了一种通过把icon图标打包成矢量化字体的方式对图标进行管理。优点：轻薄：使用icon图片的大小是字体的4-10倍。百搭：矢量化，在不同的分辨率屏幕上适配缩放不失真！Alice基础框架——iconfont的优点怎么使用？data-iconfont-family栅格化开发为我们提供了标准化的协作开发流程，设计师按照Grid栅格设计,开发人员采用Grid栅格方式高度还原设计；栅格化隐藏了复杂的BOXModal细节，为开发者提供了更加高效容易的布局方式，即使不懂CSS，也能写出栅格布局。Alice基础框架——Grid栅格通过CSS3的高级属性实现动

5、画交互，没有使用JavaScript。和CSS3特性相关的样式被单独剥离为animate.css，解决了浏览器的兼容问题。Alice基础框架——动态样式常用功能类以fn为前缀，为了在页面中更加容易的重复使用，命名采用了以面向属性的命名方式比如：fn-clear，fn-hide等Alice基础框架——常用功能类Alice提供了符合样式规范的常用组件样式库，通过样式库可以有效的规范代码的质量；Alice的通用样式库包括：ui-buttonui-navui-tipboxui-step...Alice通用模块——主样式表Alice通用模块——模块的组合

6、Head：ui-grid-25Content：ui-grid-8,ui-grid-8,ui-grid-9Head：ui-navContent：ui-boxui-form，ui-list，ui-buttonAlice的使用1，引入Alice样式文件2，使用Alice提供的HTML代码只需引入一个alice.css样式，你就能编写漂亮页面。重置样式表让所有浏览器都听话。iconfont字体代替图片，节省流量、矢量化。grid栅格让布局更为简单容易。animate.css让你随心使用css3炫酷效果。以常用功能类为辅助让代码更加简洁。基于模块化让代码

7、规范可移植。......不管你是资历深厚的大牛，还是刚刚起步的菜鸟，Alice绝对能够满足你！Alice的优势感谢聆听