我在写CSS的时候经常会碰到些麻烦事儿：
1）看上去蛮简单的排版却写了很久
2）代码写的越来越散，总是这里补一句，那里补一句，没有条理性
3）margin、padding、font-size等属性在不停的重写
效率提不上去，工期又赶，最后只能加班加点做。
后面仔细想想，其实自己可以做的更有计划性，更有条不紊的推进。
我们这边开发是按流程来进行的，UI设计没给出，是坚决不开工的。
在UI设计给出后，最多只是做些无伤大雅的微调，这样的话，其实在给出所有UI设计稿后，可以做个大概的评估。
将通用的组件、样式难点、各个动画、布局细节，了然于心，这样在开发的时候，胸有成竹。
先来看看这次设计稿的总览：
在看完所有页面后，可以开始打草稿，做抽象了。
1）loading效果
基本上每次做页面，都会有这么一个效果，所以预先准备几个这样的效果，会很有用处，将所有的相关代码写到一个文件中封装起来。
而且设计很多时候不会考虑loading这种细节效果，最终都是自己来添加的，设计也会很欢迎你帮他分担些工作。
2）弹出框
这个也基本可以说每次都会用到，所以封装一个自己的弹出框很有必要。
产品、设计也经常会忽略这个效果，经常会撂下一句话“通用的就可以”，事先准备好的话，对你对我都有帮助。
这个功能不仅仅是CSS，还得需要JavaScript的支持。
我用最简单的200行代码封装了弹出框，遵循开放封闭原则，并可自行扩展。
用法也特别简单：
3）按钮
UI都喜欢花式的按钮，但我遵循的原则是，能用CSS3画的就用CSS3画出来，少用或不用图片。
这样按钮能更通用性，各种款式的都能继承基本款式，在基本款式上修改某些参数就能实现效果。
上面的按钮有的大、有的小、有的方、有的园、有的下面是阴影、有的无边框，可以用上面的代码来概括。
按钮特别的地方在做细调。
4）输入框
输入框，基本也是标配，同样的，UI也喜欢花式的输入框，我还是遵循能画出来的就自己画。
这次的输入框，还是比较朴素的，没有用夸张的表现手法展示。
5）字体大小与颜色
UI设计稿上都会有好多种字体，但如果要求不严格的话，其实可以事先设置些字体大小，直接套用。
h1~h6这6个标签，我预先定义好了字体大小，这样也能减少使用“p”或“span”标签，让网页标签更丰富。
颜色可以向下面这样预先定义一下，但可能很多时候都会把颜色写在特定样式中，那就做个变量，放在代码中，随时引用。
6）工具样式
工具样式就是预先写好对齐方法，margin的距离，padding的距离，display的展现方式等。
可以在分析了页面后，大致的写一些，不用写太多，够用即可。
1）CSS3动画
为了让页面更生动，免不了加些动画，产品很多时候也是需要你边调试边做效果。
将动画代码放在一块儿，不然东一个西一个的，乱糟糟，自己也会忘记有哪些动画效果，搞不好还会重复写，改的时候也得到处找。
2）可复用部分
这次在做页面的时候，低估了这些可复用部分，分析的太少，导致在写的时候很多部分没有抽象出来，代码写的很僵硬。
部分1
部分2
部分3
部分4
边框修饰
有边框
有底脚与阴影，上下有小眼睛
还有两条弯曲的线
底部有阴影
有底脚与阴影
背景色
红
标题图
宽高各不同
有
无
内部展示
两列一行
三列一行
一列一行
单元内容排列
上下
左右
上中下
单元内容
上部：背景图+图标+名字
下部：按钮
大背景图
左边：图标+名字+描述+有效期
右边：价格
上部：图标
中部：名字
下部：价格
选中效果
有（与部分2相同）
有
无
大致就是上表中的情况，接下来就是细调，比较麻烦的是位置摆放，各种对齐，宽高设置，margin、padding距离计算、字体大小颜色等。
源码下载：
<a href="https://github.com/pwstrick/chezhu" target="_blank">https://github.com/pwstrick/chezhu</a>
本文转自 咖啡机（K.F.J） 博客园博客，原文链接： http://www.cnblogs.com/strick/p/6218508.html ，如需转载请自行联系原作者