团队高效简洁的CSS

Transcript

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