I often run into some trouble thing when writing the CSS:
1) it looks pretty simple layout has written a long time
2) write the code more casual, always make one here, one there make no rational
3) margin, padding, font-size and other attributes constantly rewritten
Efficiency is raised not up, schedule and in time, ultimately, to do overtime.
Think back, in fact, they can do more planning, more methodical advance.
First, global view
We develop here is carried out by the process, UI design is not given, it is determined not started.
After the design is given UI, but the most innocuous of fine-tuning to do, so, in fact, given all UI design draft, can make a rough assessment.
The general assembly, styles difficulty, each animation, layout details, clear in mind, so that when developed, with confidence.
Let's look at an overview of the design draft:
After reading all the pages, you can start scratch, doing abstract.
The next development I will use CSS Sass written by Sass better to do modular development.
Second, the General assembly
1) loading effect
Basically every time the page, there will be such an effect, so prepared several such an effect, it would be useful, all of the relevant code is written to a file in the package together.
And the design often do not consider the loading effect of such details are ultimately their own to add, the design will be very welcome to you to help him share some work.
I wrote a long time ago in a simple UI library , played a huge role in the work.
2) pop-up box
This is basically used to say every time, so a package of its own pop-up is necessary.
Product design often ignores this effect, often put down a word "generic can", prepared in advance, then you have to help me.
This feature not only CSS, you will need JavaScript support.
I use the most simple 200 lines of code encapsulates the pop-up box, follow the open closed principle, and its own expansion.
Usage is particularly simple:
Alert ( 'Please select three coupon');
3) Button
UI like fancy buttons, but in principle I follow is to use CSS3 painting drawn with CSS3, less or no picture.
这样按钮能更通用性，各种款式的都能继承基本款式，在基本款式上修改某些参数就能实现效果。
上面的按钮有的大、有的小、有的方、有的园、有的下面是阴影、有的无边框，可以用上面的代码来概括。
按钮特别的地方在做细调。
4）输入框
输入框，基本也是标配，同样的，UI也喜欢花式的输入框，我还是遵循能画出来的就自己画。
这次的输入框，还是比较朴素的，没有用夸张的表现手法展示。
5）字体大小与颜色
UI设计稿上都会有好多种字体，但如果要求不严格的话，其实可以事先设置些字体大小，直接套用。
h1~h6这6个标签，我预先定义好了字体大小，这样也能减少使用“p”或“span”标签，让网页标签更丰富。
颜色可以向下面这样预先定义一下，但可能很多时候都会把颜色写在特定样式中，那就做个变量，放在代码中，随时引用。
6）工具样式
工具样式就是预先写好对齐方法，margin的距离，padding的距离，display的展现方式等。
可以在分析了页面后，大致的写一些，不用写太多，够用即可。
三、页面特性
1）CSS3动画
为了让页面更生动，免不了加些动画，产品很多时候也是需要你边调试边做效果。
虽然不用事先准备动画代码，但可以事先了解一些动画效果，参考一些现有的开源动画库，例如“animate.css”。
将动画代码放在一块儿，不然东一个西一个的，乱糟糟，自己也会忘记有哪些动画效果，搞不好还会重复写，改的时候也得到处找。
2）可复用部分
这次在做页面的时候，低估了这些可复用部分，分析的太少，导致在写的时候很多部分没有抽象出来，代码写的很僵硬。
| 部分1 |
部分2 | 部分3 | 部分4 | |
| 边框修饰 |
有边框 有底脚与阴影，上下有小眼睛 还有两条弯曲的线 |
有边框 底部有阴影 |
有边框 有底脚与阴影 |
有边框 底部有阴影 |
| 背景色 |
红 | 红 | 红 | 红 |
| 标题图 宽高各不同 |
有 | 无 | 有 | 有 |
| 内部展示 |
两列一行 | 三列一行 | 一列一行 | 三列一行 |
| 单元内容排列 |
上下 | 上下 | 左右 | 上中下 |
| 单元内容 |
上部：背景图+图标+名字 下部：按钮 |
上部：背景图+图标+名字 下部：按钮 |
大背景图 左边：图标+名字+描述+有效期 右边：价格 |
上部：图标 中部：名字 下部：价格 |
| 选中效果 |
有（与部分2相同） | 有 | 无 | 无 |
大致就是上表中的情况，接下来就是细调，比较麻烦的是位置摆放，各种对齐，宽高设置，margin、padding距离计算、字体大小颜色等。
做这些非常耗时，好在最麻烦的对齐、位置摆放可以使用弹性布局，不但抛弃了浮动，宽还能自适应，同一行内的子元素的高能自动计算为相同。
在自己的UI库中也同样封装了弹性布局的，现在每个项目我都会引用进来。
源码下载：
https://github.com/pwstrick/chezhu
原文链接 https://www.cnblogs.com/strick/p/6218508.html