No Zuo No Die Why Not Try ? ——做更好的前端 技术中心 黄家权/mss.

Presentation on theme: "No Zuo No Die Why Not Try ? ——做更好的前端 技术中心 黄家权/mss."— Presentation transcript:

1

2 No Zuo No Die Why Not Try ? ——做更好的前端 技术中心 黄家权/mss

3 个人介绍 细节控 黄家权(mss） 网站研发前端-社区组 像素控 前端重构工程师 我在唯品大前端等你哦！ 3

4 如何更（zuo）好（si）？ 4

5 Before Now 5

6 是什么更好 margin-right:-1px; 6

7 是什么更好 ? float: left; display: block; 创建块级格式化上下文
Block Formatting Context 7

8 是什么更好 ? height: 28px; line-height: 28px; 有内容行高撑开高度
还可以更好一点：min-height: 28px; 8

9 是什么更好 事后： 改变： 1、tab数随时扩展 2、束缚少了（css可成长） 3、代码少了^-^ 9

10 是什么更好 那么问题来了 看起来的区别？ 10

11 是什么更好 11

12 HTML、CSS、Image、Font……
怎么样更好 重构能做的很多 HTML、CSS、Image、Font…… 12

13 怎么样更好 结构命名 13

14 怎么样更好 登录框 广告位 提交按钮 拉风的按钮 新闻列表 14

15 怎么样更好 初学者可能是这样的： #div1 #div2 #btn1 拉风的按钮 #div3 15

16 写demo的时候我是会这样的( ＠^^＠)
怎么样更好 写demo的时候我是会这样的( ＠^^＠) 16

17 怎么样更好 正常玩家可能是这样的： .form .ad .submit-btn 拉风的按钮 .news-list OOCSS 17

18 怎么样更好 18

19 怎么样更好 Grid 业界里或者更好的方法： .c1/.span8 .c2/.span4 .form .ad .r1/.row
.submit-btn 拉风的按钮 .news-list .r2/.row Grid .c3/.span12 19

20 还有一种是伪（不标准）栅格系统，利用栅格作为控制宽度，内容自适应布局。
怎么样更好 还有一种是伪（不标准）栅格系统，利用栅格作为控制宽度，内容自适应布局。 20

21 怎么样更好 类Nec/SMACSS 现在团队的方法： .m-ad .m-form .g-bd .u-submit-btn 拉风的按钮
.m-news-list 类Nec/SMACSS 21

22 怎么样更好 布局（grid）：.g- 模块（module）：.m-（模块扩展不使用数字） 元件（unit）：.u- 状态：.z-
（为兼容IE6，不使用.a.b选择器，开启状态不为.z-open，为.z-selector-open） 22

23 怎么样更好 Component <section id=“form”>SEO Code</section> 未来：
Shadow Dom .m-form .m-ad .g-bd .u-submit-btn 拉风的按钮 .m-news-list Component 23

24 怎么样更好 感兴趣？看看示例吧 1、看起来好像很不错，组件化的时代不远了。
2、从目前发现的BUG（浏览器标准不明确，坑还有不少）来看，上述不乐观。 3、从现在就开始准备吧，拥抱未来。 24

25 怎么样更好 素材资源 25

26 怎么样更好 一图一用式 优点： 快速使用、互不干扰 缺点： 大量http请求、命名不规范会杂乱无章、交互闪烁 等 26

27 怎么样更好 雪碧图(sprite) ——网格 优点： 减少http请求、整合零散图片 缺点： 当旧零散图片删除或更新时，网格位置很难
相应调整改变，当维护时间长后容易造成冗 余，后人不敢修改。 27

28 自动化雪碧图（grunt-sprite||compass sprite||..）
怎么样更好 自动化雪碧图（grunt-sprite||compass sprite||..） 优点： 在网格sprite的基础上弥补了它难以维护素 材的缺点，能根据小图资源的变更来对应生 成新的sprite。 缺点： 需要环境、工具支持 28

29 怎么样更好 Icon Font 29

30 怎么样更好 示例 Icon Font 优点： 使用字体代替图标，大小、颜色均可以随意 改变，适应Retina屏，体积比图片少。 缺点：
增加设计成本投入，图标只能是纯色，维护 成本不低，浏览器锯齿，文件载入可能失败 受css字体属性干扰。 简便使用icon font： 示例 30

31 怎么样更好 SVG Sprite 31

32 怎么样更好 示例 SVG Sprite 优点： 支持所有icon font有的功能，支持局部颜色不同 ，支持css控制，更好的渲染效果。
缺点： 增加设计资源投入，浏览器兼容ie9+，向下兼容 方案成本高（例如inline SVG） svg和icon font的对比 示例 32

33 为什么更好 说那么多为了什么？页面还不是和我写的一样。 寻根问底，了解特性，解放页面 33

34 站在台风口，猪也能飞起来。 前端正在火热，热度退减后能继续飞才是真本事。 为什么做得更好的不能是我？ Thanks！

35 Q & A