我在寫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 ，如需轉載請自行聯系原作者