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

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

CSS Reset 歷史 與 Normalize.css 介紹

Normalize.css 源碼解讀

Normalize-zh.css 出爐

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

這一章節(jié)內(nèi)容會(huì)弱化CSS Reset的主題，不是因?yàn)檫@章節(jié)與CSS Reset無(wú)關(guān)了，而是因?yàn)槲覀円谒U(kuò)展更多的內(nèi)容，來(lái)幫助我們解決實(shí)際開(kāi)發(fā)中更多的問(wèn)題。

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

  
《關(guān)于CSS Reset 那些事（四）之 基于CSS Reset 構(gòu)架CSS基礎(chǔ)樣式庫(kù)》

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

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

2.假設(shè)你要做一份文案策劃的網(wǎng)頁(yè)，包含很多文字排版時(shí)，此時(shí)Normalize.css也許并不完全適合你，因?yàn)樗哪J(rèn)字體設(shè)置和排版布局可能不能滿足你的要求。

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

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

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

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

我認(rèn)為基礎(chǔ)樣式庫(kù) 始終 能幫我們解決開(kāi)發(fā)時(shí)遇到的一些基礎(chǔ)性問(wèn)題：

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

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

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

如一些樣式的浮動(dòng)，對(duì)齊操作，需要統(tǒng)一管理起來(lái)進(jìn)行多次復(fù)用；

如常見(jiàn)的CSS動(dòng)畫(huà)效果，需要統(tǒng)一起來(lái)管理方便復(fù)用；

如一些常用的圖標(biāo)，需要一套可復(fù)用的字體圖標(biāo)；

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

基礎(chǔ)庫(kù)初衷和未來(lái)方向：

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

提供簡(jiǎn)潔高效開(kāi)發(fā)體驗(yàn)

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

做為未來(lái)UI組件庫(kù)核心基礎(chǔ)

始終站在巨人肩上

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

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

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

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

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

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

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

設(shè)置全局字體，修復(fù)表單元素不繼承父級(jí)font的問(wèn)題

添加鏈接基本樣式

移除列表元素的默認(rèn)標(biāo)識(shí)

移除元素默認(rèn)邊框

移除鏈接默認(rèn)的下劃線

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

修復(fù)th不繼承text-align，默認(rèn)左對(duì)齊

重置標(biāo)題，采用自定義

把所有斜體標(biāo)簽?zāi)J(rèn)扶正

統(tǒng)一引用標(biāo)記

統(tǒng)一上標(biāo)和下標(biāo)

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

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

不過(guò)這里默認(rèn)使用@import "html5.css"進(jìn)行導(dǎo)入只是為了預(yù)覽調(diào)試，請(qǐng)?jiān)趯?shí)際使用中將代碼拷貝合并至normal.css，或者使用yuicompressor，Grunt進(jìn)行壓縮合并后再使用。

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

修復(fù)HTML5新元素不能正確顯示的問(wèn)題

修復(fù)progress元素的對(duì)其問(wèn)題

修復(fù)沒(méi)有controls屬性的audio顯示出來(lái)

修復(fù)hidden屬性不起作用的問(wèn)題

修復(fù)svg元素overflow不正常的問(wèn)題

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

修復(fù)拖動(dòng)元素添加拖動(dòng)的光標(biāo)

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

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

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

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

修復(fù)"legend"元素的若干問(wèn)題

修復(fù)表單元素字體與字號(hào)不繼承的問(wèn)題

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

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

重置按鈕禁用時(shí)光標(biāo)樣式

修復(fù)checkbox,radio的屬性box-sizing: border-box;

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

統(tǒng)一select的樣式

修復(fù)textarea只能為縱向拉伸

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

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

提供多種場(chǎng)景按鈕，如主要，警告與錯(cuò)誤

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

提供組合式按鈕

支持iconfont.css，搭配圖標(biāo)按鈕使用

使用示例

默認(rèn)

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

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

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

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

.ui-grid-container(固定寬度)通過(guò)媒體查詢來(lái)實(shí)現(xiàn)響應(yīng)式寬度

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

xs,sm,lg通過(guò)媒體查詢來(lái)實(shí)現(xiàn)響應(yīng)式

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

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

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

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

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

簡(jiǎn)化代碼，不支持列偏移，列排序

使用示例

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

提供最常用的功能類(lèi)class，命名使用fn-前綴來(lái)進(jìn)行區(qū)別表示，如果在項(xiàng)目中能夠靈活復(fù)用這些類(lèi)，那將大大提升開(kāi)發(fā)效率。

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

浮動(dòng)元素與清楚浮動(dòng)元素

垂直與水平滾動(dòng)

元素顯示類(lèi)型

元素與文本隱藏

文本不換行

文本強(qiáng)制換行

文本溢出顯示省略號(hào)

文本左右對(duì)齊

文本垂直對(duì)齊

常用符號(hào)(關(guān)閉，箭頭，下三角等)

自適應(yīng)兩端對(duì)齊

未知高度垂直居中

列表平鋪

使用示例

文字那是相當(dāng)?shù)拈L(zhǎng)

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

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

提供網(wǎng)頁(yè)中66個(gè)最常用的字體圖標(biāo)

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

使用示例

~提交

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

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

彈跳

閃爍

搖動(dòng)

淡入 (up,down,left,righ)

淡出

滑入 (up,down,left,righ)

滑出

使用示例

    淡入效果

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

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

修復(fù)打印時(shí)的背景和文字顏色

刪除所有的陰影效果

標(biāo)注超鏈接，并顯示URL鏈接

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

項(xiàng)目名稱：Koala - 更簡(jiǎn)潔高效的基礎(chǔ)樣式庫(kù)
項(xiàng)目版本：alpha（內(nèi)部測(cè)試與學(xué)習(xí)參考使用）
項(xiàng)目地址：https://github.com/Alsiso/Koala
項(xiàng)目交流：New issue

歡迎大家Fork代碼，提出問(wèn)題與意見(jiàn)，一起進(jìn)行學(xué)習(xí)交流 ~

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

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

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

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

關(guān)于CSS Reset 那些事（一）之 歷史演變與Normalize.css

關(guān)于CSS Reset 那些事（二）之 Normalize.css 源碼解讀

關(guān)于CSS Reset 那些事（三）之 Normalize-zh.css 出爐