细节控像素控我在唯品大前端等你哦.ppt

No Zuo No Die Why Not Try ? ——做更好的前端 技术中心 黄家权/mss 3 个人介绍 黄家权(mss） 网站研发前端-社区组 前端重构工程师 细节控 像素控 我在唯品大前端等你哦！ 4 如何更（zuo）好（si）？ 5 Before Now 6 是什么更好 margin-right:-1px; 7 是什么更好 float: left; display: block; ? 创建块级格式化上下文 Block Formatting Context 8 是什么更好 height: 28px; line-height: 28px; ? 有内容行高撑开高度 还可以更好一点：min-height: 28px; 9 是什么更好 事后： 改变： 1、tab数随时扩展 2、束缚少了（css可成长） 3、代码少了^-^ 10 是什么更好 那么问题来了 看起来的区别？ 11 是什么更好 12 怎么样更好 HTML、CSS、Image、Font…… 重构能做的很多 13 怎么样更好 结构命名 14 怎么样更好 登录框 新闻列表 提交按钮 广告位 15 怎么样更好 初学者可能是这样的： #div1 #div2 #div3 #btn1 16 怎么样更好 写demo的时候我是会这样的( ＠^^＠) 17 怎么样更好 正常玩家可能是这样的： .form .ad .news-list .submit-btn OOCSS 18 怎么样更好 19 怎么样更好 业界里或者更好的方法： .form .ad .news-list .submit-btn .r1/.row .r2/.row .c1/.span8 .c2/.span4 .c3/.span12 Grid 20 怎么样更好 还有一种是伪（不标准）栅格系统，利用栅格作为控制宽度，内容自适应布局。 21 怎么样更好 现在团队的方法： .m-form .m-ad .m-news-list .u-submit-btn .g-bd 类Nec/SMACSS 22 怎么样更好 布局（grid）：.g- 模块（module）：.m-（模块扩展不使用数字） 元件（unit）：.u- 状态：.z- （为兼容IE6，不使用.a.b选择器，开启状态不为.z-open，为.z-selector-open） 23 怎么样更好 未来： .m-form .m-ad .m-news-list .u-submit-btn .g-bd Component section id=“form”SEO Code/section Shadow Dom 24 怎么样更好 感兴趣？看看示例吧 1、看起来好像很不错，组件化的时代不远了。 2、从目前发现的BUG（浏览器标准不明确，坑还有不少）来看，上述不乐观。 3、从现在就开始准备吧，拥抱未来。 /article/shadow_dom_101.html /article/shadow_dom_201.html /article/shadow_dom_301.html 25 怎么样更好 素材资源 26 怎么样更好 优点： 快速使用、互不干扰 缺点： 大量http请求、命名不规范会杂乱无章、交互闪烁等 一图一用式 27 ——网格 怎么样更好 雪碧图(sprite) 优点： 减少http请求、整合零散图片 缺点： 当旧零散图片删除或更新时，网格位置很难 相应调整改变，当维护时间长后容易造成冗 余，后人不敢修改。 28 怎么样更好 优点： 在网格sprite的基础上弥补了它难以维护素 材的缺点，能根据小图资源的变更来对应生 成新的sprite。 缺点： 需要环境、工具支持 自动化雪碧图（grunt-sprite||compass sprite||..） 29 怎么样更好 Icon Font 30 怎么样更好 优点： 使用字体代替图标，大小、颜色均可以随意 改变，适应Retina屏，体积比图片少。 Icon Font 缺点： 增加设计成本投入，图标只能是纯色，维护 成本不低，浏览器锯齿，文件载入可能失败 受css字体属性干扰。 简便使用icon font： / http://icomoon.io/ 示例 31 怎么样更好 SVG Sprite 32 怎么样更好 优点： 支持所有icon font有的功能，支持局部颜色不同，支持css控制，更好的渲染效果。 缺点： 增加设计资源投入，浏览器兼容ie9+，向下兼容方案成本高（例如inline SVG） SVG Sprite svg和icon font的对比 /icon-fonts-vs-svg/ 示例 33 为什么更好 说那么多为了什么？页面还不是和我写的一样。 寻根问底，了