http://www.ibm.com/developerworks/cn/web/wa-htmlcss/?ca=drs-tp4608
[my word] 這是一篇介紹CSS架構的文章，雖然短，卻比我以前看過的css架構的東西覆寫了更廣的方面，每一方面都是一掠而過，也許在看過那些tutorial之後再來這麼一篇高屋建瓴的文章，有助于你對CSS架構具體如何使用認識的升華
編寫更優美的網頁
Cascading Style Sheets (CSS) 架構可以加速和簡化網頁的設計和開發。此外，CSS 架構可以在所有浏覽器中生成更加标準化的結果。本文将介紹兩種獨特的 CSS 架構。
大約在 1950，在建構了 L 型 Usonian 房屋之後，建築師 Frank Lloyd Wright 引入了 Usonian Automatic —— 一種全新的成品部件系統和一系列簡單的技巧，允許外行建造大多數新房屋的結構。對于 Wright 而言，Usonian Automatic 房屋非常經濟、實用、有吸引力，并且将改變房屋的格局。
Wright 系統的核是一個标準化的 4x12x24 英寸的帶凹面的混凝土或玻璃磚塊。舉例來說，建一堵牆需要花三個步驟。首先，磚塊的堆砌不需要灰泥。接下來，橫向及垂直鋼筋插入在磚塊中以形成架構。最後，灰泥填充到邊緣間隙中以固定鋼筋和磚塊，以及凝固結構。是以，除了搭建根基之外，大部分工作都可以由任何有決心的、動手能力強的人獨立完成。
雖然靈活，但 Usonian Automatic 系統在實踐中被證明難以實作且費用昂貴，這讓 Wright 感到異常沮喪。與 Wright 的目标相反，許多房主都開始找專業承包人來建房。盡管如此，為了轉換搭建舒适房屋的經濟局面，Wright 的系統嘗試提供了完整的基礎設施 — 材料、技巧和底蘊 — 其價值是不可忽視的。Usonian Automatic 簡直就是一個架構。
軟體開發架構
軟體開發也可以從架構中受益。與 Usonian Automatic 相似，軟體架構可以簡化代碼的建構，進而允許開發人員将精力更多地集中于軟體用途上，而不是簡單組裝工作。
舉例來說，Apple® 的知名架構 Cocoa 提供了各種工具、類庫、技術以及展現公司應用程式開發方法。通過采用 Cocoa，Mac 開發人員不需要完全重新設計。他們可以将時間花在一些獨特、有價值、有市場的特性上。
除了 Cocoa 之外，還有許多其他的軟體架構可用。Zend 提供了同名的 Zend Framework 用于 PHP 開發。Django、Rails 和 Catalyst 分别對應于 Python、Ruby 和 Perl 應用程式提供了一個基于 Model-View-Controller (MVC) 的架構。Nokia 的 Qt 是一種跨平台的（包括 Mac OS® X、Linux® 和 Microsoft® Windows® 等）圖形應用程式開發架構。
确實，幾乎軟體開發的每個方面都提供了至少一個架構。這對于任何程式設計技術的第二代及更後代尤為正确。早期的試驗和錯誤有助于形成更好的實踐，并能啟發創新，進而在下一代架構中加以利用。
Django 和 Rails 已經證明，伺服器端 Web 開發已經日益成熟。以浏覽器為中心的應用程式開發也是如此。SproutCore 是一種針對基于浏覽器的應用程式的富 JavaScript 架構，并且 Flex 和 Silverlight 分别提供了一個完整的應用程式棧。
但奇怪的是，網頁開發 —— 對于任何線上工作都是一項重要、基本的任務 —— 始終保持着較慢的發展步伐。或者說是在原地踏步。在過去兩年中出現了許多網頁架構，它們使 Hypertext Markup Language (HTML) 和 CSS 在各種浏覽器中的建構更加簡單、速度更快且可預測性更高，甚至實作了标準化。
本文将介紹兩個用于網頁建構的架構：Blueprint 和 Yahoo!® User Interface (YUI) Grid。兩個架構都是可以免費使用和互換的，分别遵照 Massachusetts Institute of Technology (MIT) License 和 Berkeley Software Distribution (BSD) License 的條款。本文将分别介紹兩者的創新之處和功能，并指導大家完成一系列示例。您可以選擇最适合自己的架構。
Blueprint 簡介
由于 HTML 是一種标準，并且所描述的是結構而非樣式，是以 Blueprint 架構是完全作為 CSS 實作的。要使用 Blueprint，您在設計網頁時要以 Blueprint 為指導，然後再設計或生成 HTML，以便将 Blueprint CSS 樣式應用于 HTML 元素。實際上，由于 Blueprint 提供了強大的 CSS，是以您可以在 HTML 中設計網頁，而不必使用圖像設計程式來模拟最終頁面，比如說 photoshop。從一定意義上說，Blueprint 提供了真正的所見即所得的（WYSIWYG）網頁設計，因為您的原型将使用與最終站點相同的代碼。
此外，由于 Blueprint 的主要作用是模拟列印頁的外觀，是以使用 Blueprint 進行互動式的設計的感覺更像是在使用 QuarkXPress 或 Adobe InDesign。Blueprint 樣式基于像素和一個 18 像素的基線網格。借助設計天賦和努力，您可以建立具有專業外觀的頁面。
Blueprint 的 CSS 樣式（大約 250 種）可劃分為三類功能，如 表 1 所示。
表 1. Blueprint 的 CSS 樣式類别類别
描述
重置
清除浏覽器關于填充、類型樣式以及其他特性所有假定。可以将重置看作一個幹淨的面闆：您隻能看到 Blueprint 或自己明确定義的樣式和效果。
清單 1 的 Blueprint 用于重置的 CSS 代碼。
網格
定義了一個最高容器、各種固定列寬，以及其他許多用于左右移動各列、添加邊框和建構優美表單的修飾符。一種網格樣式甚至還能為基本列填充顔色，以簡化設計和調試。大多數 Blueprint 樣式都是作為 CSS 類實作的，是以您可以通過向某個 HTML 元素配置設定一個或多個類來混合效果。
版式
控制頁面文字的外觀。HTML 的 type 元素用 em 定義，進而允許頁面外觀在文字大小改變時保持一緻和有序。版式 CSS 還将所有元素的垂直對齊設定為
baseline
（清單 1 中 CSS 代碼的最後一行），這樣所有框中的文字，不論嵌入有多深，都可以保持對齊。
清單 1. Blueprint 用于重置的 CSS 代碼margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline; 圖 1 展示了 Blueprint 的一種用途。網絡上提供了該示例（見 參考資料）。
圖 1. Blueprint 樣式的 HTML 頁面的一個例子 圖 2 顯示了相同的頁面，隻是字型變得更大了。網格仍然緊湊且相同，因為尺寸是使用像素指定的。
圖 2. 與圖 1 相同的 HTML 頁面，但通過浏覽器首選項增加了字型大小 Blueprint 的預設網格是 950 像素寬，分為 24 個由 10 像素分隔線隔開的 30 像素寬的列：[(24 列 * 30 像素/列) + (23 分隔線 * 10 像素/分隔線) = 950 像素]。如果您偏好或者需要更寬或更窄的網格或不同的列寬，Blueprint 提供了一個 Ruby 工具用于将 Blueprint 重新生成到您的 規範中。Ruby 工具還建立了一個網格圖像，您可以在 Photoshop 中引用它，并且它壓縮了最終的 CSS 以減小檔案大小，進而縮短了傳輸時間和帶寬。
使用 Blueprint 建立網頁
為了幫助您熟悉 Blueprint，本文将建立示例頁面的一部分，如 圖 1 所示。
第一步是在您的 HTML 頁面中包括 Blueprint 的 CSS 檔案，如 清單 2 所示。這段 HTML 代碼假定您将 Blueprint 檔案儲存在 Web 根目錄 css/blueprint 的某個子目錄下。
清單 2. 将 Blueprint 的 CSS 檔案包括在 HTML 頁面中media="screen" rel="stylesheet" type="text/css"
href="css/blueprint/screen.css" target="_blank" rel="external nofollow" />
media="print" rel="stylesheet" type="text/css"
href="css/blueprint/print.css" target="_blank" rel="external nofollow" />
rel="stylesheet" type="text/css"
href="css/custom.css" target="_blank" rel="external nofollow" />
...
共有三種标準的 Blueprint 檔案，如 表 2 所示。
表 2. 标準 Blueprint CSS 檔案檔案
描述
ie.css
專門用于重置 Internet Explorer 的代碼
screen.css
儲存用于螢幕顯示的樣式
print.css
聲明一組用于列印的預設樣式
通常，您不應該編輯 Blueprint CSS 檔案。而是應該在一個單獨的檔案定義您自己的樣式，并根據需要覆寫 Blueprint 代碼。這是最後一個檔案 css/custom.css 的作用，這個檔案是作為您自己代碼的一部分建立和維護的。
首先，所有的 Blueprint 頁面必須包含在一個适當标記的
div
中
class="container"
。如果您希望檢視頁面的底層網格，可以添加
showgrid
類，如 清單 3 所示。
清單 3. 添加showgrid
<
/body>
圖 3 顯示了預設的 Blueprint 網格。
圖 3. 預設的 Blueprint 網格 在使用 Blueprint 進行設計時遵循兩個簡單的規則：
-
将網格放在腦海中。
Blueprint 預先定義了大量基于多個列的樣式。舉例來說，
.span-4
textarea
.span-4
div
div.span-n
n
-
将基線謹記于心。
Blueprint 将整個頁面的線高度設定為 18 像素，是以每個圖像和文本都必須是 18 像素的倍數。
要繼續此示例（回顧 圖 1），頁面的第一段和第二段是通過
alt
類輕松完成的，如 清單 4 所示。
alt
類是 custom.css 中定義的一種自定義樣式。
清單 4.alt
A simple sample page< /h1>
This sample page demonstrates a tiny fraction of what you get with Blueprint.
頁面的下一部分，即三個文本框所在的行，也是由 Blueprint 預先定義的一些 span 實作的，如 清單 5 所示。
清單 5. Blueprint 預先定義的 spanHere's a box
Lorem ...
And another box
Lorem ...
This box is aligned with the sidebar
Lorem ...
如前所述，帶
span-n
标記的
div
橫跨
n
列，位于左側，并且右邊距為一個分割線寬度。
last
樣式應該應用于任何序列的最後一列。令人驚訝的是，
last
并未明确強制重新配置其後的任何元素；它僅僅将右邊距設定為 0，這将覆寫
span-n
中 10 像素的預設右邊距設定。而
hr
會強制清空，排除換行之後的任何元素。
hr class="space"
将繪制一條白線，進而有效地呈現不可見的規則，但需要提供一個标準的垂直空白空間。
colborder
樣式将在第一與第二以及第二與第三個框之間建立灰色線條。為了實作這條線，樣式将右側填充擴充至 24 像素，繪制了一條單像素線條（在列的中部），并将右邊距擴充至 25 像素。由于 Blueprint 是基于像素的，是以保持網格對齊是非常必要的。
下一行内容與之前相類似，但第一列通過
prepend-1
修飾符稍微與網格有所遠離，如 清單 6 所示。
清單 6.prepend-1
【zz】BluePrint and YUI CSS 架構A simple sample page<
/h1>
Lorem ...
Integer cursus ornare mauris. ...
...
This is a nested column
Lorem ipsum ...
This is another nested column
Lorem ipsum ...
prepend-v
樣式，其中 v 的範圍是從 1 到 23，用于使用
padding-left
為
v
列和
v-1
分隔線預留足夠的像素。
小狗圖像的高度是 180 像素。由于它的高度是 18 的倍數，是以圖像右側和下方的文本在指定基線上仍然是等距的。
發現所有 Blueprint 技巧最好的方式是從上至下讀取 screen.css 檔案。下面給出了一些要點和技巧：
-
hide
display: none;
-
added
removed
highlight
- 您可以使用
push-i
pull-j
i
j
再說一次，Blueprint 的方法是獨一無二的。它強制使用通常在列印設計中出現的網格。但是，這并不一定有壞處。這項決策允許您很好地控制自己的站點在任何浏覽器中的顯示效果。
YUI Grids 簡介
相反，YUI Grids 為 CSS 提供了固定寬度的頁面和可變寬度的頁面，并且它提供了任意深度的列嵌套。您還可以任意定位或移動各列，是以可以使用 CSS 簡單快捷地對頁面上的内容進行排序。舉例來說，您可以将導航從左側移至右側，而隻需要一處 CSS 修改。此外，您使用 Yahoo 自己的 JavaScript 庫來擴充 YUI Grids，以提高互動性。您可以另外了解關于 YUI JavaScript 庫的更多資訊。本文側重介紹 Grids 的樣式表，它可以獨立于 JavaScript 庫運作。
YUI Grids 在許多方面都與 Blueprint 相似：
- 它使用一組可預測的基線樣式來簡化版面。
- 它定義了版式樣式。
- 它提供了許多預定定義的、适用于大多數 Web 應用程式的頁面布局。
YUI Grids 還定義了一組列式網格，您可以通過嵌入來建立任意複雜的頁面。
大約種 100 YUI Grids CSS 樣式可以劃分為三個類别，如 表 3 所示。
表 3. YUI Grids CSS 樣式類别類别
描述
文檔
定義頁面的寬度。
模闆
描述各種流行的、雙列頁面格式。通常，一列比另一列寬，分别提供主要内容和導航功能。模闆樣式還提供了一些變量來交換兩列的順序。
網格
控制兩個或多個
div
元素在一行中的顯示方式。内嵌網格設定每個嵌入
div
的寬度，啟用浮動，以及控制何時開始和結束一行。
與 Blueprint 不同，内嵌的網格樣式使用百分比來描述各元件的寬度。是以，當頁面的寬度增加時，整個網格以及網格中的各個元素也在随之增加。但是，網絡的元件始終維持相對大小，比如說 66% 和 33%。
圖 4 展示了一個通過嵌套實作的列布局。它的頂部和底部分别有一個頁眉和腳注。内容區本身是一個含兩列的網格，每個列又劃分為一個兩列網格。
圖 4. 内嵌網格的 YUI Grids 布局 使用 YUI Grids 建構網頁
要使用 YUI Grids，Yahoo 推薦在 Web 浏覽器中以嚴格的行為提供多個呈現模式。您可以在 HTML 檔案的第一行中請求嚴格模式：
接下來，您必須包括 YUI Grids CSS。為了您的友善，Yahoo 提供了一個最簡化的樣式表。
rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css" target="_blank" rel="external nofollow" > （您還可以下載下傳檔案，并将它儲存在自己的 Web 根目錄中，或者，如果隻希望使用它的一部分特性，則可以下載下傳它的各個元件。一個部分實作了重置（reset）；另一個部分描述版式（typography）；第三個部分定義網格元素（grid））。
與 Blueprint 相似，使用 YUI Grids 建構的頁面必須擁有标準的元件，如 清單 7 所示。
清單 7. YUI Grids 的标準頁面元件最外面的
div
的 ID 用于确定頁面的寬度。共有四種樣式，從
doc1
到
doc4
。
id="doc1"
用于指定 750 像素的頁面；
id="doc2"
用于指定 950 像素的頁面；
id="doc4"
用于指定更寬且越來越常用的 974 像素的頁面。
id="doc3"
是不固定的寬度。所有頁面寬度樣式都将内容居中。
站點内容應該放置在 ID 為
bd
的
div
中。
内容進一步劃分為兩個 “塊”，一主一次，如 清單 8 所示。（可以根據需要再對塊進行劃分，如 圖 4 所示）。
清單 8. 主塊和從塊yui-b
表示 “塊”，并且一個 YUI Grids 頁面中應該始終有兩個塊。根據習慣，
yui-main
一般顯示在左側，除非您向最外面的
div
添加了一個類樣式以更改兩個列的順序。舉例來說，
将 180 像素的區域置于左側（否則應位于最右側）。
每個塊中都嵌入了一個風格。每個網格可以包含一個或多個子網格，或者一個或多個 “單元”。清單 9 是用于建構如 圖 4 所示的四列布局的 HTML 和相關的 CSS。
清單 9. 用于建構如圖 4 所示的四列布局的 HTML 和相關的 CSSyui-g
代表 “網格”，而
yui-u
代表 “單元”。此處，
outermost
網格（其名稱僅僅是為了在讨論中便于差別）包括另外兩個網格：
firstgrid
和
secondgrid
。
first
樣式訓示新 “行” 的開始，或者網絡及單元的順序。實際的内容将顯示在各個單元中。
預設情況下，網格 —— 也就是
yui-g
—— 在兩個單元之間是平均配置設定的。您可以修改它，方法是使用一個特殊的類來替換
yui-g
。舉例來說，如果您希望将之前清單中的兩個網格繼續劃分為兩個單元，其中一個單元是另一個單元的兩倍寬度，可以編寫如 清單 10 所示的代碼。
清單 10. 将兩個網格繼續劃分為兩個單元，其中一個單元是另一個單元的兩倍寬度yui-gc
将兩個單元分别設定為可用寬度的 66% 和 33%。結果如 圖 5 所示。其他的變量請參見 YUI Grids 文檔。一個有趣的例外是網格樣式
yui-gb
，它可以平均劃分三個 嵌入單元的空間。
圖 5. 修改 YUI Grids CSS 網格中的單元的布局 YUI Grids 有些麻煩，但是它在所有的浏覽器的都能正常運作，并且适用于移動裝置。Yahoo 聲稱 YUI Grids 在它自己的站點中得到了廣泛應用。如果是這樣的話，它應該能相容所有流行的浏覽器。
結束語
除了 Blueprint 和 YUI Grids 之外，您還可以在網絡上找到 10 到 12 種可用于加速網頁設計及開發的架構。一些架構是 “重量級的”，詳細指定了項目的組織和其他約定。其他一些則是 “輕量級的”。事實上，它們隻是一系列帶有解釋的 CSS 代碼。要找到所有的選項，在搜尋引擎中輸入
CSS 架構
，細讀結果并衡量您的項目是否能從中受益。
無論您選擇哪種架構（如果您還沒有架構，則應該選擇一個），它絕對可以節省您的時間和工作。
Wright 的 Usonian Automatic 可能談不上成功，但它的精神永存。