摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。

先來回顧一下前幾章節，我們都說了哪些內容：

CSS Reset 歷史 與 Normalize.css 介紹

Normalize.css 源碼解讀

Normalize-zh.css 出爐

圍繞著CSS Reset這個話題我們已將講了3章節，從中了解到CSS Reset的作用，Normalize.css的優勢，以及它是如何幫我修復跨瀏覽器的兼容性問題的；

這一章節內容會弱化CSS Reset的主題，不是因為這章節與CSS Reset無關了，而是因為我們要基于它去擴展更多的內容，來幫助我們解決實際開發中更多的問題。

現在回到我們這一章節的標題，將它做下補充：

  
《關于CSS Reset 那些事（四）之 基于CSS Reset 構架CSS基礎樣式庫》

我上一章節的末尾拋出了幾個問題：

1.假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義Normalize.css樣式來滿足自己的需求。

2.假設你要做一份文案策劃的網頁，包含很多文字排版時，此時Normalize.css也許并不完全適合你，因為它的默認字體設置和排版布局可能不能滿足你的要求。

3.假設你要做一個企業類型的網站，并考慮跨瀏覽器兼容性，網站包含內容元素也很豐富，那么你可以選擇使用Normalize.css來統一你的瀏覽器樣式，但是它僅僅幫助我們解決了樣式統一的問題是不夠的，你是不是還要設計一套布局系統，來解決該網站的布局問題呢？

從以上幾個問題可以看出，在構建大型網站的時候，我們可以把Normalize.css作為基礎樣式，然后根據不同的頁面需求，進行添加樣式覆蓋它。

但是這只是我們的第一步，關于網頁開發中更多的基礎解決方案還有很多，比如剛剛說的布局系統，或許你還會用到很多常用的CSS問題解決方法，如浮動和清除浮動，自適應兩端對其等等。

那么下一節，我們就來分析一下CSS 基礎庫到底包含什么內容？

我認為基礎樣式庫 始終 能幫我們解決開發時遇到的一些基礎性問題：

如瀏覽器樣式不統一，需要重置樣式；

如基礎表單樣式過于難看不易操作，需要優化其樣式；

如布局樣式需要重復編寫，需要一套穩定復用的解決方案；

如一些樣式的浮動，對齊操作，需要統一管理起來進行多次復用；

如常見的CSS動畫效果，需要統一起來管理方便復用；

如一些常用的圖標，需要一套可復用的字體圖標；

如需要打印，提供一套更為合理的打印樣式

基礎庫初衷和未來方向：

最大程度減少開發難度

提供簡潔高效開發體驗

趨于模塊化樣式構建規范

做為未來UI組件庫核心基礎

始終站在巨人肩上

normal.css   [基于Normalize.css自定義模塊，繼承其優勢，改善文字與部分細節]
html5.css    [html5樣式修復，默認會導入normal.css，可按需引用]
form.css     [表單的一些基礎樣式，可按需引用]   
grid.css     [響應式網格系統，優化命名與精簡代碼，可按需引用]   
utils.css    [HTML中直接使用的工具類，可按需引用] 
iconfont.css [一套復用率極高的字體圖標，可按需引用] 
animate.css  [常用的動畫效果組合，可按需引用] 
print.css    [優化默認的打印樣式，可按需使用]

我們按照需求，初步劃分了基礎樣式庫的結構，起初html5.css的內容是考慮直接放在normal.css里面的，但是為了考慮一部分人在頁面中使用了像html5shiv的解決方案來兼容低版本瀏覽器，所以這里就體現出了分模塊的便捷性，拆分為一個獨立的css文件，需要時再進行使用，不過這里默認使用@import "html5.css"進行導入只是為了預覽調試，請在實際使用中將代碼拷貝至normal.css，或者使用yuicompressor進行壓縮合并后再使用。

下一節我們來細化基礎樣式庫的內容，看一看它都需要幫我們做哪一些事情。

Normalize.css不僅統一了樣式，還保留元素的可辨識性，這是我們應該繼承和發揚的優點，normal.css也會參考借鑒Normalize.css所有優勢，不過為了讓其更簡潔，讓開發者更容易上手，我選擇對它進行瘦身，比如移除一些不會用到的元素標簽hgroup，將一些元素進行分模塊管理，比如html5.css，form.css等，方便按需求靈活引用。

normal.css 包含內容以及調整部分

字體約定62.5%，方便單位轉換

統一元素的內外邊距

設置全局字體，修復表單元素不繼承父級font的問題

添加鏈接基本樣式

移除列表元素的默認標識

移除元素默認邊框

移除鏈接默認的下劃線

移除單元格間距讓其邊重合

修復th不繼承text-align，默認左對齊

重置標題，采用自定義

把所有斜體標簽默認扶正

統一引用標記

統一上標和下標

html5.css主要是用于解決html5新元素在舊瀏覽器中的不識別，并且修復一些元素存在的隱性問題。

但是為什么不把html5.css這部分內容直接放入normal.css，而是考慮將其進行分模塊管理呢？ 是為了考慮一部分人在頁面中已經使用了像html5shiv的解決方案來兼容低版本瀏覽器，所以這里就體現出了分模塊的靈活性，拆分為一個獨立的css文件，需要時再進行使用。

不過這里默認使用@import "html5.css"進行導入只是為了預覽調試，請在實際使用中將代碼拷貝合并至normal.css，或者使用yuicompressor，Grunt進行壓縮合并后再使用。

html5.css 包含內容以及調整部分

修復HTML5新元素不能正確顯示的問題

修復progress元素的對其問題

修復沒有controls屬性的audio顯示出來

修復hidden屬性不起作用的問題

修復svg元素overflow不正常的問題

統一mark標簽的樣式

修復拖動元素添加拖動的光標

form.css修復表單元素在不同瀏覽器下的默認樣式，尤其是IE低瀏覽器版本下的一些怪異問題；并且還修復了一些表單顯示狀態，致力于提升用戶體驗；

button按鈕在網頁中是最常用的基礎元件，但是不同瀏覽器下按鈕的默認樣式千奇百怪，而且表現形式過于單一，所以考慮在form.css里內置了一套按鈕組件，提供幾種表現場景，并且可以和下面要介紹的iconfont.css搭配使用。

form.css 包含內容以及調整部分

統一fieldset元素的顯示樣式

修復"legend"元素的若干問題

修復表單元素字體與字號不繼承的問題

統一表單元素的垂直對其方式

統一表單元素的overflow屬性為visible

重置按鈕禁用時光標樣式

修復checkbox,radio的屬性box-sizing: border-box;

統一button,input內邊距和內邊框

統一select的樣式

修復textarea只能為縱向拉伸

ui-btn 按鈕組件包含的內容

初始化默認按鈕樣式，增加不同狀態下的效果

提供多種場景按鈕，如主要，警告與錯誤

提供可定制的大小按鈕，如較小，更小，一般，較大，更大

提供組合式按鈕

支持iconfont.css，搭配圖標按鈕使用

使用示例

默認

借鑒了Bootstrap的一套響應式流式柵格布局系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

對柵格系統的樣式命名進行重新組織，簡化和移除工具代碼，只保留核心布局樣式。
簡潔即是高效率。

grid.css 包含內容以

.ui-grid-container(固定寬度)和.ui-grid-fluid(100%寬度)用于包裹.ui-row

.ui-grid-container(固定寬度)通過媒體查詢來實現響應式寬度

.ui-row用于包裹一組.ui-col-1-.ui-col-12列

xs,sm,lg通過媒體查詢來實現響應式

.ui-col-xs-* 超小屏幕 手機 (<768px)

.ui-col-sm-* 小屏幕 平板 (≥768px)

.ui-col-* (默認)中等屏幕 桌面顯示器 (≥992px)

.ui-col-lg-* 大屏幕 大桌面顯示器 (≥1200px)

支持列嵌套，必須包裹在.ui-row行中

簡化代碼，不支持列偏移，列排序

使用示例

      
.ui-col-8
      
.ui-col-8
  

提供最常用的功能類class，命名使用fn-前綴來進行區別表示，如果在項目中能夠靈活復用這些類，那將大大提升開發效率。

utils.css 包含內容以及調整部分

浮動元素與清楚浮動元素

垂直與水平滾動

元素顯示類型

元素與文本隱藏

文本不換行

文本強制換行

文本溢出顯示省略號

文本左右對齊

文本垂直對齊

常用符號(關閉，箭頭，下三角等)

自適應兩端對齊

未知高度垂直居中

列表平鋪

使用示例

文字那是相當的長

iconfont都已經很熟悉了，是一種把圖標放入自定義字體中，然后使用字體圖標來替代普通圖標的技術，使用起來方便靈活。

iconfont.css 包含內容以及調整部分

提供網頁中66個最常用的字體圖標

可搭配form.css按鈕組件使用

使用示例

~提交

CSS3的動畫讓網頁變的更加有活力，所以這里引入一套CSS3動畫庫，可以通過簡單的引用類名的方式在你的項目中實現最常見的動畫效果。

animate.css 包含內容以及調整部分

彈跳

閃爍

搖動

淡入 (up,down,left,righ)

淡出

滑入 (up,down,left,righ)

滑出

使用示例

    淡入效果

可以優化打印出的網頁更適合瀏覽，并且加快打印速度，節省打印機耗材。

print.css 包含內容以及調整部分

修復打印時的背景和文字顏色

刪除所有的陰影效果

標注超鏈接，并顯示URL鏈接

通過對以往開發中遇到問題的總結，以及對CSS基礎庫的需求進一步細化，當我們明確的知道需要什么了以后，從參考業內最優秀的CSS框架，到提取出能夠解決我們實際問題的代碼；從以往的開發經驗中整理出最高效復用的方案，再到一次次的“取之精華去之糟粕”； 最終這篇文章有了產出：

項目名稱：Koala - 更簡潔高效的基礎樣式庫
項目版本：alpha（內部測試與學習參考使用）
項目地址：https://github.com/Alsiso/Koala
項目交流：New issue

歡迎大家Fork代碼，提出問題與意見，一起進行學習交流 ~

最后再說明一點：當前版本并不是正式生產版，所以還不能完全應用到項目中，目前僅供學習參考使用，部分的細節完善和優化還在進行中，如果你有意見和問題，歡迎隨時聯系：chyi722到163.com

CSS基礎樣式庫只是前端解決方案中最小的一個分支，其實我們還可以完善更多的內容來幫助解決前端開發中所有的問題，就猶如下面這個表格。

后續會持續跟進完善內容，致力于讓前端開發變得更簡單，高效，穩定，也讓我們的工作生活變的像Koala一樣，每天擁有18個小時的睡眠時間~

至此《關于CSS Reset 那些事》的系列文章已經完結了，感謝大家關注Alsiso，后續也會以這種方式來分享學習成果與方法。

關于CSS Reset 那些事（一）之 歷史演變與Normalize.css

關于CSS Reset 那些事（二）之 Normalize.css 源碼解讀

關于CSS Reset 那些事（三）之 Normalize-zh.css 出爐