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

前言

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

1. CSS Reset 歷史 與 Normalize.css 介紹
2. Normalize.css 源碼解讀
3. Normalize-zh.css 出爐

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

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

如今回到咱們這一章節的標題，將它作下補充：

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

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進行壓縮合並後再使用。

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

CSS 基礎庫內容

樣式重置方案 normal.css

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

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

• 字體約定62.5%，方便單位轉換
• 統一元素的內外邊距
• 設置全局字體，修復表單元素不繼承父級font的問題
• 添加連接基本樣式
• 移除列表元素的默認標識
• 移除元素默認邊框
• 移除連接默認的下劃線
• 移除單元格間距讓其邊重合
• 修復th不繼承text-align，默認左對齊
• 重置標題，採用自定義
• 把全部斜體標籤默認扶正
• 統一引用標記
• 統一上標和下標

HTML5元素 html5.css

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

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，搭配圖標按鈕使用

使用示例

<button type="button" class="ui-btn">默認</button>

柵格系統 grid.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行中
• 簡化代碼，不支持列偏移，列排序

使用示例

<div class="ui-grid-fluid">


<div class="ui-row">
      <div class="ui-col-8">.ui-col-8</div>
      <div class="ui-col-4">.ui-col-8</div>
  </div>


</div>

輔助工具 utils.css

提供最經常使用的功能類class，命名使用fn-前綴來進行區別表示，若是在項目中可以靈活複用這些類，那將大大提高開發效率。

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

• 浮動元素與清楚浮動元素
• 垂直與水平滾動
• 元素顯示類型
• 元素與文本隱藏
• 文本不換行
• 文本強制換行
• 文本溢出顯示省略號
• 文本左右對齊
• 文本垂直對齊
• 經常使用符號(關閉，箭頭，下三角等)
• 自適應兩端對齊
• 未知高度垂直居中
• 列表平鋪

使用示例

<!-- 文字溢出顯示省略號 -->
<div class="fn-text-ellipsis">文字那是至關的長</div>

字體圖標 iconfont.css

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

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

• 提供網頁中66個最經常使用的字體圖標
• 可搭配form.css按鈕組件使用

使用示例

<button class="ui-btn"><b class="iconfont">&#126;</b>提交</button>

動畫庫 animate.css

CSS3的動畫讓網頁變的更加有活力，因此這裏引入一套CSS3動畫庫，能夠經過簡單的引用類名的方式在你的項目中實現最多見的動畫效果。

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

• 彈跳
• 閃爍
• 搖動
• 淡入 (up,down,left,righ)
• 淡出
• 滑入 (up,down,left,righ)
• 滑出

使用示例

<div class="animated fadeIn">
    淡入效果
</div>

打印 print.css

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

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

• 修復打印時的背景和文字顏色
• 刪除全部的陰影效果
• 標註超連接，並顯示URL連接

CSS 基礎庫的產出

項目地址

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

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

歡迎你們Fork代碼，提出問題與意見，一塊兒進行學習交流 ~

最後再說明一點：當前版本並非正式生產版，因此還不能徹底應用到項目中，目前僅供學習參考使用，部分的細節完善和優化還在進行中，若是你有意見和問題，歡迎隨時聯繫：chyi722到163.com

後續的擴展

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

分層	結構層+表示層	行爲層
	html+css	js
基礎庫	normal/grid/utils/scss擴展/	jquery/base/seajs/
組件	元件/靜態組件	ui組件/業務組件
模塊	html/css/js(基礎庫+組件)

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

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

• 關於CSS Reset 那些事（一）之 歷史演變與Normalize.css
• 關於CSS Reset 那些事（二）之 Normalize.css 源碼解讀
• 關於CSS Reset 那些事（三）之 Normalize-zh.css 出爐