這兩個星期，又寫了一些靜態頁面，感覺比之前要快多了，下面來總結總結寫靜態頁面的時候要注意的一些問題，以及如何更高效的搞定需求。
在團隊作戰中，規範尤其重要，一個項目需求出來之後，經歷需求分析，產品出原型，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
}