YUI3的CSS與YUI2的CSS不同
改變最大的我覺得是Grids部分，YUI2中以模版的方式提供給我們調用，功能中多選項也很多，而且配合Grid Build Tool，可以快速的生成復雜的頁面結構。但正因為其復雜，所以在一些需要自定義比較多的場景下使用起來就比較痛苦。YUI3一改以往的復雜性，僅僅是提供簡單的頁面邏輯結構單元，我們可以自由的定義頁面的寬度，結構單元的分布。非常簡單。當然，目前還處於Beta階段，不知道后續會不會變的越來越強大。
YUI3 CSS Base
Base可以將眾多的HTML元素設置成一個基本的樣式，同樣，提供了全局和局部的選項，可以根據需要使用。
YUI3 Reset
YUI3的Reset同YUI2.8中的Reset有些區別，在YUI3的CSS Reset中，我們可以對所有HTML資源重設其表現，以達到不同瀏覽器下的一致表現（Page Level）。同時，還提供了一個局部的特性（Contextual），通過引用一個 .yui3-cssreset 類，可以針對局部的HTML進行樣式Reset（使用這種方法需要包含cssreset-context/cssreset-context-min.css文件）。這個特性對於開發人員是非常有用的。
YUI3 Fonts
在YUI2的Fonts中，使用em來表示文字的大小。但是在YUI3中，這一規則被打破了，改為使用百分比來表示文字的大小。如下表，這樣的表達方式對於平時的書寫來說，是不太友好的。對於<pre>和<code>標簽，會對里面的內容使用等寬字體（monospace）
YUI3 Grids
習慣了YUI2中的Grids System之后，初次轉換到YUI3中非常不習慣。因為YUI2提供了一個非常強大的工具（
YUI Css Grid Builder）。但同時，YUI2因為其強大，也帶了較高的復雜度，曾經因為為了調整頁面的寬度，而花費了不少的功夫。YUI3的Grids System卻是相當的簡單，看看下面這個列表，就能夠明白一二。
在YUI3中，所有的單位都轉換為百分比，因此首先需要為頁面制定一個總的寬度。最基本的方法是設置body的寬度，例如：
body {
margin: auto;
width: 960px;
}
在構建自己的頁面之前，我們需要在yui3-u*外面加一個yui3-g的容器。容器內的單元，可以根據自己的需要選擇不同的比例。
<code>
<div class="yui3-g">
<div class="yui3-u-1-2">
<div class="content">
</div>
</div>
<div class="yui3-u-1-2">
<div class="content">
</div>
</div>
</div>
</code>
默認情況下，每個位置單元間都是緊挨着的，沒有空間（這一點與YUI2也不同）。但是我們可以手工添加一個Gutter。
<code>
<style>
.yui3-g .content {
margin-right:10px;
}
</style>
</code>
流式布局的實現方式
流式布局，是指左右（或者只有一邊）欄寬度固定，中間部分內容可以隨着頁面寬度發生變化的頁面布局形式，可以通過設置Padding的方式來實現。
Dom結構如下：
<div class="yui3-g" id="layout">
<div class="yui3-u" id="nag"></div>
<div class="yui3-u" id="main"></div>
<div class="yui3-u" id="extra"></div>
</div>
Style如下：
<style>
#layout {
padding-left:300px; /* "left col" width */
padding-right:150px; /* "right col" width */
}
#nav {
margin-left:-300px; /* "left col" width */
width:300px;
}
#extra {
width:150px;
margin-right:-150px; /* "right col" width */
}
#main {
width:100%;
}
</style>
YUI3的官方網站上提供了配合MenuNav Node Plugin，可以創造出眾多的菜單效果，非常值得一看。
在網上看到了一個
國外的哥們總結的網頁布局的歷史，非常有趣，翻譯一下吧：
- 1990－1993:黎明前的黑暗。黑暗騎士用有限的工具（headings、lists、paragraphs）為了部落的興盛而努力。
- 1994－1997:Table帝國。這一時期有了“Sidebar”這個重要發明。帝國的部落逐漸安定下來，並且開始建造各種復雜的頁面布局。
- 1998－1999:巴洛克時期。Table帝國時期建造的標志開始逐漸的破敗，瀏覽器的戰爭威脅到了文明世界的每個人。同時，大草原上開始不斷的出現使用“div”工具的野蠻人。
- 2000－2002:黑暗時代。經濟衰落了，Table帝國分崩離析，很多人被吸收到了野蠻人部落中，並且開始學習使用他們的工具。黑暗魔法開始流行，在這個時期，只有最偉大的薩滿才能夠建造一切。
- 2003－2005:復興。人們開始分享知識，講授瀏覽器技巧的學校開始不斷涌現。
- 2006－2010:啟蒙時期。CSS Framework出現了，對於瀏覽器的處理開始系統化。知識被寫到了法典中。
參考資料：