每個功能塊的CSS代碼都很少，力求簡單易懂，低門檻，代碼可根據自己實際情況輕易修改，改到符合自己場景為止。
之是以重複造輪子，有以下幾點原因：
1）現今開發很多時候講究效率，給你很短的時間，完成很多的内容。
如果不備點存貨，那隻能加班加點的趕進度。
2）由于是加班加點趕出來的項目，百分百會有各種問題，相容性啊、功能性啊、與設計圖偏差。
如果碰到挑細節的測試或上司，搞不好就要讓你1像素1像素的調界面了。
3）如果有套經曆過沉澱的UI庫，那麼能夠通過樣式元件，快速搭建頁面，并且相容性等各方面都有保證。
開發的時候隻要關注各個頁面中的細節即可，從容的寫代碼。
4）網上的很多開源庫都比較大，當需要在實際項目中使用的時候，可能就需要修改部分代碼。
正因為比較大，改動的時候就比較費勁。
5）很多開源庫都做些精細的雕琢，但自己公司的UI設計可能并不喜歡這種風格。
這樣他們設計出來的頁面會與那些庫不一緻，就會出現第4種的情況。
6）寫一套自己的UI庫，可以提升自己的想象空間，激發創造力。
CSS3提供了很多新特性，但平時可能都沒用到，不是不想用，而是想不到該如何用，例如僞元素、彈性布局等。
7）開發的過程也是學習和實踐的過程，将平時看到的，用到的，組合到一起，做了以後才會看到問題，再解決實際問題。
古人說的絕知此事要躬行還是很有道理的。
8）整套UI庫，其實更可以把其看成是套骨架，一套你可以随意修改的骨架，要血肉豐滿可以自己動手，這樣更有成就感。
這裡隻是分享一下思路，抛鑽引玉。
現在前端開發與以前不同了，以前隻要個帶顔色的文本編輯器，一個浏覽器即可。
現在前端項目也越來越大，也需要管理配置。
1）工程搭建
2）CSS開發
還裝了浏覽器屬性相容插件，rem自動計算插件等。
3）頁面自适應
4）文檔庫編輯
說明的文檔庫是很有必要的，讓人更有感性的認識。
所有的檔案就如上圖所示，下面就介紹下CSS的開發過程，demo展示頁面與文檔編輯就直接略過了。
1）rem
rem（font size of the root element）是指相對于根元素的字型大小的機關。
庫中大部分都用了這個機關，這樣能做更好的适配。但字型、邊框等使用了px機關。
2）網格（grid.scss）
但移動端的話，這麼寫還不夠，移動端的浏覽器比PC端的先進，是以可以用更新的CSS3屬性來實作。
CSS3中有個彈性布局（Flexible），這是個好東西，可以自動計算寬度的，非常适合手機螢幕。
由于手機螢幕尺寸很多，很多情況下不能寫死，即使用百分比，某種角度來說，還是寫死的。
彈性布局還有個好處，那就是對齊，我以前碰到過兩個字型大小不一樣，但是要在同一行底部對齊，當時做起來很費勁。
而使用彈性布局隻要一個屬性即可，我在這個CSS子產品中，封裝了多種對齊樣式。
用網格可以輕易實作元素位置的擺放，而不像以前要用float、position來做布局，清單、布局、表單的實作就需要與網格的協作。
3）預編譯
預編譯有很多優點：
1. 減少代碼，預編譯中有條件判斷和循環，這樣能組織更多的邏輯，還能複用。
2. 變量的定義，能夠使得值更有語義。
3. 嵌套文法，可以讓CSS更有層次，一眼就能看出父級是誰，不像以前還得寫一長串。
4. 混合（mixin）與函數（function）可以将通用的邏輯或代碼提煉出來，能更好的複用。
5. CSS也可以做子產品化，通過“@import”引用不同的功能塊，适應不同的場景。
會用了以後能夠做很多事情，友善開發，提升效率。希望這個庫對大家平時的開發會有幫助。
本文轉自 咖啡機（K.F.J） 部落格園部落格，原文連結：http://www.cnblogs.com/strick/p/5536321.html，如需轉載請自行聯系原作者