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

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

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

Before Now 5

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

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

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

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

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

是什么更好 11

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

怎么样更好 结构命名 13

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

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

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

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

怎么样更好 18

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

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

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

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

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

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

怎么样更好 素材资源 25

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

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

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

怎么样更好 Icon Font 29

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

怎么样更好 SVG Sprite 31

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

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

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

Q & A