这两个星期，又写了一些静态页面，感觉比之前要快多了，下面来总结总结写静态页面的时候要注意的一些问题，以及如何更高效的搞定需求。
在团队作战中，规范尤其重要，一个项目需求出来之后，经历需求分析，产品出原型，UI出图，前端写页面，后台处理接口数据库等等。每一个环节都至关重要，缺一不可。这里我们讨论的是将UI图转换为页面的过程。
在出图之前，我们应该跟UI有个沟通，沟通的细节有：
1、间距值尽量统一。举个栗子： 8px, 16px, 32px, 40px 等等，不要出现一些乱七八糟的值
2、颜色统一。主题色， 对应的hover，active；背景色；边框色；常用的透明度值
3、按钮风格。分颜色，圆角，大小等等。不要高度大小不一
4、图标。使用css spirits, 将图标放一张图里面，虽然使用起来要用background-position处理，但是既省了空间，也提高的图片请求的性能。
待UI出完图之后，先不要急着写页面，而是写一份不仅属于自己也适用于团队其他成员的css类公用文件。
这份类文件不要奢望适用于你所有的项目，能适用于你当下要做的项目就ok。能适用所有的也就那么几行。比如定义浮动，设置box-sizing等等
具体问题具体分析:
1、UI图常用字体大小从12到40，不等，那就把这些常用的定义出来，如：.font-14{ font-size: 14px }
2、颜色值。包括背景色。这里我没有用变量处理主题色，感觉也够用了
3、有些我的个人习惯， 比如浮动的fl,fr； 还有清楚浮动等等
有时候一个项目三五个前端合作，势必会出现沟通和使用方式的问题。所以这个类文件也需要一个前端leader去把握，能不能做到让每个团队成员都用的舒服就看水平了。当然，前期写出来给团队成员讲解分享一波还是很有必要，毕竟沟通很重要！
下面贴一份我的类文件：
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6{
font-size: 12px;
font-weight normal
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
.text-center{
text-align center
}
.text-right{
text-align right
}
.flex-center{
display flex
align-items center
}
.page-container{
width: 1200px;
margin: 0 auto;
}
.font-12{
font-size: 12px;
}
.font-13{
font-size: 13px
}
.font-14{
font-size: 14px;
}
.font-16{
font-size: 16px;
}
.font-18{
font-size: 18px;
}
.font-20{
font-size: 20px;
}
.font-24{
font-size: 24px;
}
.font-28{
font-size: 28px;
}
.font-32{
font-size: 32px;
}
.font-40{
font-size: 40px;
}
.bold{
font-weight: bold;
}
.normal{
font-weight: normal
}
.color-white{
color #fff
}
.color-000{
color #000
}
.color-111{
color #111
}
.color-222{
color #222222
}
.color-666{
color #666666
}
.color-333{
color #333333
}
.color-555{
color #555555
}
.color-777{
color #777777}
.color-999{
color #999999
}
.theme-color{
color: #ff9e00
}
.bg-fff{
background #fff
}
.touch{
cursor pointer
}