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

先來回顧一下前幾章節(jié)，我們都說了哪些內(nèi)容：

CSS Reset 歷史 與 Normalize.css 介紹

Normalize.css 源碼解讀

Normalize-zh.css 出爐

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

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

現(xiàn)在回到我們這一章節(jié)的標題，將它做下補充：

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

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

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

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

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

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

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

那么下一節(jié)，我們就來分析一下CSS 基礎庫到底包含什么內(nèi)容？

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

如瀏覽器樣式不統(tǒng)一，需要重置樣式；

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

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

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

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

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

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

基礎庫初衷和未來方向：

最大程度減少開發(fā)難度

提供簡潔高效開發(fā)體驗

趨于模塊化樣式構建規(guī)范

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

始終站在巨人肩上

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

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

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

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

normal.css 包含內(nèi)容以及調(diào)整部分

字體約定62.5%，方便單位轉(zhuǎn)換

統(tǒng)一元素的內(nèi)外邊距

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

添加鏈接基本樣式

移除列表元素的默認標識

移除元素默認邊框

移除鏈接默認的下劃線

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

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

重置標題，采用自定義

把所有斜體標簽默認扶正

統(tǒng)一引用標記

統(tǒng)一上標和下標

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

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

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

html5.css 包含內(nèi)容以及調(diào)整部分

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

修復progress元素的對其問題

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

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

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

統(tǒng)一mark標簽的樣式

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

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

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

form.css 包含內(nèi)容以及調(diào)整部分

統(tǒng)一fieldset元素的顯示樣式

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

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

統(tǒng)一表單元素的垂直對其方式

統(tǒng)一表單元素的overflow屬性為visible

重置按鈕禁用時光標樣式

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

統(tǒng)一button,input內(nèi)邊距和內(nèi)邊框

統(tǒng)一select的樣式

修復textarea只能為縱向拉伸

ui-btn 按鈕組件包含的內(nèi)容

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

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

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

提供組合式按鈕

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

使用示例

默認

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

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

grid.css 包含內(nèi)容以

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

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

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

xs,sm,lg通過媒體查詢來實現(xiàn)響應式

.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-前綴來進行區(qū)別表示，如果在項目中能夠靈活復用這些類，那將大大提升開發(fā)效率。

utils.css 包含內(nèi)容以及調(diào)整部分

浮動元素與清楚浮動元素

垂直與水平滾動

元素顯示類型

元素與文本隱藏

文本不換行

文本強制換行

文本溢出顯示省略號

文本左右對齊

文本垂直對齊

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

自適應兩端對齊

未知高度垂直居中

列表平鋪

使用示例

文字那是相當?shù)拈L

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

iconfont.css 包含內(nèi)容以及調(diào)整部分

提供網(wǎng)頁中66個最常用的字體圖標

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

使用示例

~提交

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

animate.css 包含內(nèi)容以及調(diào)整部分

彈跳

閃爍

搖動

淡入 (up,down,left,righ)

淡出

滑入 (up,down,left,righ)

滑出

使用示例

    淡入效果

可以優(yōu)化打印出的網(wǎng)頁更適合瀏覽，并且加快打印速度，節(jié)省打印機耗材。

print.css 包含內(nèi)容以及調(diào)整部分

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

刪除所有的陰影效果

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

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

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

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

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

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

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

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

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

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

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