YUI學習筆記–CSSRest、Base、Font以及Grid

YUI不僅為我們提供了一個強大的JS框架，同時還提供了幾個CSS的框架，分別是Reset、Base、Font以及Grid。通過在頁面中引用這幾個CSS，可以讓我們的前端開發工作事半功倍，達到快速將美工圖轉化為實際產品、並且能夠保證在絕大多數瀏覽器上的正常表現。今天我們就來了解一下這幾個CSS。

YUI這幾個CSS存在於兩個版本的YUI中（YUI2和YUI3）。本文的介紹以YUI3版本為例。

1、YUI3 Css Reset。

做過前端的朋友都知道，目前眾多的瀏覽器，對於HTML的解析並不是完全一樣。比如 li ，這個元素預設的樣式在IE和Firefox中就不一樣。Css Reset 就是為了消除這種不同元素在各個瀏覽器下的不同而設計的。這樣，我們在 Build 我們的頁面的時候，就是建立在一個完全一致的基礎上，能夠非常方便的讓我們按照自己的想法去進行排版佈局。通過這個例子我們可以看到，使用了 Css Reset之後的樣式會是什麼樣的。

YUI3的Css Reset還提供了區域性的Reset樣式的功能，在我們想對某一容器內的元素（而不是整個頁面）進行樣式統一時使用。

2、YUI3 Css Base。

Css Base是一個補充YUI的核心CSS框架的檔案，Css Base 為符合 A-Grade Browsers的瀏覽器提供了一個標準的基礎。這個檔案也可以作為我們擴充套件自己CSS框架的基礎。同樣Css Base也有全域性（Global）和區域性（Contextual）的選擇。

3、YUI3 Css Fonts。

Css Fonts保證了跨瀏覽器的字型一致，即使在使用者對字型進行調整情況下也是如此。不管是標準模式（Standard）還是怪異模式（Quirks），只要是A-Grade Browsers 都支援。

4、YUI3 Css Grids。

Css Grids 提供了一套基本的、簡單的佈局系統。我們使用CSS進行佈局時，不需要再為兩欄、三欄以及各種分欄形式而煩惱，使用Css Grids可以快速的實現。YUI3 Css Grids中對於命名規則進行了改變，這與YUI2 Css Grids中有很大的不同。不過基本原理還是一樣的熟悉了任何一個，就能夠方便快速的進行頁面的佈局。Css Reset、Css Font、Css Grids三個合起來，構成了YUI CSS的一個核心。我們可以一次將這三個檔案引入進來。當然，現在YUI3的Css Grids還在Beta階段，還不是太完善，如果我們需要一個成熟的解決方案，可以考慮使用YUI2的Css Grids，使用YUI2的Css Grids並不會影響我們使用YUI3的框架，他只是一個樣式表嘛 ?

參考資料：
1、YUI CSS Reset
2、YUI CSS
3、A-Grade Browsers