支付宝CSS样式架构

支付宝CSS样式架构小鱼(@sofish)叫我小鱼（林建锋）两年前在法学院毕业目前在支付宝搞搞前端微博：@sofish博客：构建⼀一个可扩展，适合团队协同开发的库用方便的方式发布上线内容概要SUMMARY基础构建规范、浏览器解决方案(方法+插件)、通用库等团队开发组件代码库+展示平台、工具（TODO）静态部署打包、部署内容概要SUMMARY基础构建规范、浏览器解决方案(方法+插件)、通用库等（我们的做法）⼀一套编码、组件库构建+维护+升级规范⼀一个通用组件库+拥有展示平台的库⼀一种打包部署方案⼀一些些解决方案（插件）基础构建规范、浏览器解决方案(方法+插件)、通用库等（我们的做法）⼀一套编码、组件库构建+维护+升级规范⼀一个通用组件库+拥有展示平台的库⼀一种打包部署方案规范组件库支付宝构建部署解决方案⼀一些些解决方案（插件）基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）我们要解决的问题是什么?基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）我们要解决的问题是什么基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）我们要解决的问题是什么CSS框架基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）我们要解决的问题是什么CSS框架产品组件基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）我们要解决的问题是什么基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）我们要解决的问题是什么多团队、多产品并行开发支付宝遇到的问题：基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）我们要解决的问题是什么多团队、多产品并行开发支付宝遇到的问题：PA.CSS6000行/100KB代码冗余严重全局设置太多，多产品共用耦合高基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）代码多代码冗余严重全局设置多基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）代码多代码冗余严重全局设置多＝精简吧基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）代码多代码冗余严重全局设置多＝精简吧＝做成CSS框架吧基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）代码多代码冗余严重全局设置多＝精简吧＝做成CSS框架吧=严格规定框架不能修改基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）代码多代码冗余严重全局设置多new提供⼀一个解决BUG的库＝精简吧＝做成CSS框架吧=严格规定框架不能修改基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）new基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）最终她只有20KB所有产品都可以基于她来扩展基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）最终她只有20KB所有产品都可以基于她来扩展不再需要引用100KB的CSS可以只关注本产品的升级维护、不怕改动影响到其他产品的样式有浏览器兼容方案帮忙解决头痛的问题福特说：如果我当年去问顾客他们想要什么，他们肯定会告诉我：“⼀一匹更快的马”福特说：如果我当年去问顾客他们想要什么，他们肯定会告诉我：“⼀一匹更快的马”我们是不是该换⼀一种思路了基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）产品⼀一产品三产品五产品二产品四产品六样式库基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）编码风格不统⼀一：命名、注释、模块化不能跨产品重复利用代码仍然冗余产品组内合作困难、换产品组需要适应期依赖情况不明，个性化强并不是所有元件都会用到、并且需要覆盖框架new基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）new基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）new基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）抽象出组件，提供组件DOM模板，颗粒化模块提供最基础的依赖文件制定编码规范，统⼀一命名、注释、模块化制定组件库构建、维护和升级规则基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）抽象出组件，提供组件DOM模板，颗粒化模块提供最基础的依赖文件制定编码规范，统⼀一命名、注释、模块化制定组件库构建、维护和升级规则基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）产品组产品组产品组产品⼀一产品二产品三基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）产品组产品组产品组产品⼀一产品二产品三基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）产品组产品组产品组产品⼀一产品二产品三基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）产品组产品组产品组产品⼀一产品二产品三统⼀一的编码方式，在那个位置（产品线）组件代码都⼀一目了然。各产品组只关注自己产品组件的构建、维护和升级只依赖base.css，可跨产品使用（为什么有用？）基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）除了规范外最重要的是:通用解决方案基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）除了规范外最重要的是:通用解决方案layout、1pxroundcornerrorate、css3-likeshadowforcewrap、vertical&horizonalalignflashcopy、float:centerline-gradient、iframeautoadjust...基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）除了规范外最重要的是:通用解决方案layout、1pxroundcornerrorate、css3-likeshadowforcewrap、vertical&horizonalalignflashcopy、float:centerline-gradient、iframeautoadjust...基础构建规范、浏览器解决方案(方法+插件)、通用库等（为什么这样做）除了规范外最重要的是:通用解决方案layout、1pxroundcornerrorate、css3-likeshadowforcewrap、vertical&horizonalalignflashcopy、float:centerline-gradient、iframeautoadjust...产品⼀一产品三产品五产品二产品四产品六团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）基于统⼀一规范的库，产品组只需要关注自己的组件库。即使因有临时需要转到其他产品组，也可以因为相同的规范很迅速适应。团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）基于统⼀一规范的库，产品组只需要关注自己的组件库。即使因有临时需要转到其他产品组，也可以因为相同的规范很迅速适应。团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）基于统⼀一规范的库，产品组只需要关注自己的组件库。即使因有临时需要转到其他产品组，也可以因为相同的规范很迅速适应。如果要重复使用组件代码呢？团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）基于统⼀一规范的库，产品组只需要关注自己的组件库。即使因有临时需要转到其他产品组，也可以因为相同的规范很迅速适应。如果要重复使用组件代码呢？告诉队友放在那个地方（svn）有个可视的方式让他确认是否是自己需要的团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）建立产品组件库的展示平台提供方便的组件代码获取方式团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）（1）组件代码库不得跨产品引用（2）关于重得劳动团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）（1）组件代码库不得跨产品引用（2）关于重得劳动BUG是头痛的问题业务是头发的问题，基础技术还得应用于产品（通用解决方案）团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）（1）组件代码库不得跨产品引用（2）关于重得劳动BUG是头痛的问题业务是头发的问题，基础技术还得应用于产品（通用解决方案）团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）（1）组件代码库不得跨产品引用（2）关于重得劳动BUG是头痛的问题业务是头发的问题，基础技术还得应用于产品（通用解决方案）有通用解决方案，能不能有通用产品组件？团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）目前我们在正从交互到视觉，再到前端建立⼀一套全站统⼀一的规范并构建成⼀一个通用库团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）目前我们在正从交互到视觉，再到前端建立⼀一套全站统⼀一的规范并构建成⼀一个通用库团队开发组件代码库+展示平台、工具（TODO）（统⼀一、透明）目前我们在正从交互到视觉，再到前端建立⼀一套全站统⼀一的规范并构建成⼀一个通用库保护头发，从减少产品重复劳动开始！团队开发组件代码库+展示平台、工具（TO-DO）（TO-DO）（1）Code  Review（2）跨产品组件复制的背景图片问题团队开发组件代码库+展示平台、工具（TO-DO）（TO-DO）（1）Code  Review（2）跨产品组件复制的背景图片问题扩展CSS（如扩展LESSCSS）AutoSprites（CSSGaga、imagemagic）静态部署版本管理、打包、压缩，最级部署线上环境（1）版本管理、打包压缩（2）GUI  界面部署静态部署版本管理、打包、压缩，最级部署线上环境（1）版本管理、打包压缩（2）GUI  界面部署静态部署版本管理、打包、压缩，最级部署线上环境（1）版本管理、打包压缩（2）GUI  界面部署maven+ant+yuicompressor静态部署版本管理、打包、压缩，最级部署线上环境（1）版本管理、打包压缩（2）GUI  界面部署maven+ant+yuicompressormaven+nodejs静态部署版本管理、打包、压缩，最级部署线上环境（1）版本管理、打包压缩（2）GUI  界面部署maven+ant+yuicompressormaven+nodejs使用支付宝前端架构组基于Maven的（组件库）版本管理、部署系统说完我们的这套方案然后呢？说完我们的这套方案然后呢？说完我们的这套方案然后呢？说完我们的这套方案我们还在做更多的事然后呢？说完我们的这套方案我们还在做更多的事然后呢？说完我们的这套方案我们还在做更多的事开源然后呢？说完我们的这套方案我们还在做更多的事开源然后呢？说完我们的这套方案我们还