15個CSS架構簡介

對于小的Web開發項目來說，CSS 架構并不一定就适用，至少不見得能提高多少工作效率。但對于一個開發團隊和規模比較大的項目來說，CSS 架構不僅能加快設計程序，更能解決網站改版中帶來的諸多麻煩和問題。

對于CSS架構，本人也隻是處于學習狀态，唯一真正試用接觸過的CSS架構，隻有我之前的介紹的一個960網格系統。下面，收集整理一些CSS架構，孰優孰劣，有需要的朋友親自去試試。

YUI Grids CSS

這應該是最著名的CSS架構吧，由Yahoo開發小組開發而成。YUI Grids CSS為開發者提供了預先設定的四種不同頁面寬度，六種不同的模闆。有國外作者曾指出YUI Grids CSS中最值得學習的網格布局CSS寫法:

負Margin技術

使用度量機關em

清除布局的浮動

其中負margin技術，我個人覺得WordPress主題sandbox 可謂運用的爐火純青，有興趣的朋友可以看看。

YAML CSS Framework

YAML (”Yet Another Multicolumn Layout”) 是一個 (X)html/CSS 架構，它為了滿足彈性的和使用者友好的布局而開發的。YAML自2007年出現以來就提供了廣而全的文檔。像許多其他的CSS-Framework如Blueprint CSS 或 YUI Grids 一樣，提供了一個預定義的 CSS-classes 系統，用來建立基于網格的布局。要建立一個布局，設計師需要建立網站 HTML 結構，然後為容器（html标簽）書寫CSS，剩下的就自理了。

Elements CSS Frameworks

Elements是一款純淨的CSS架構，可以幫助設計師快速高效率的書寫css文檔。你可以将他了解成一套模闆，裡面包含了大多數站點中所需要的那些css類。他很小，隻有四個檔案而已。總共不到6KB。

WYMstyle: a CSS framework

這個項目的目的是提供一組經過良好測試的子產品化的CSS檔案，能夠用于網站的快速設計。WYMstyle是一組CSS檔案，你可以很容易的組合這些檔案來 快速的建立你的網站的布局。通過提供可靠的、經過良好測試的CSS子產品，WYMstyle 力求讓每個網站防止枯燥的跨浏覽器相容性測試。

Blueprint CSS

Blueprint 是一個 CSS 架構，它的目的是減少你的css開發時間。它提供一個可靠的css基礎去建立你的項目，BP由一個易用的網格、合理的布局和一個列印樣式。

Boilerplate CSS Framework

作為BluePrint CSS的原作者之一，我決定把我的思想重新整理到一個赤裸裸的架構，它提供最基本的要素來開始任何項目。這個架構将是較小的而且力求不使用非語義的命名習慣。你就是設計者而且你的技術很重要。

Tripoli Beta CSS Framework

Tripoli是一個用于HTML表現的通用css規範。通過重設和重建浏覽器标準，Tripoli 為你的網站項目提供了一個标準的、跨浏覽器表現的基礎。

ESWAT Web Project Framework

ESWAT正在重新整理。如果你是沖着我的網站架構來的，那麼你就可以在這裡下載下傳。也許你也想看看我的其他項目gmachina、AppleSeed。

CwS CSS Framework

下一個邏輯步驟就是将這個擴充為CSS架構，允許使用寫好并通過測試的元件來快速開發網站。實際上所需的是搞定一套命名習慣和一個靈活的基本模闆…

Schema Web Design Framework

Schema 是一個為了提供在重複的設計任務中必須的CSS和HTML标簽而設計的表現層的網頁架構設計。 與為每一個新的網站項目從零開始建立HTMl/CSS不同，Schema提供必要的基礎來開始并立馬讓你的設計跑起來。

CleverCSS

CleverCSS是一個用于css的受Python啟發的小型的标記語言，它可用于以整潔的和結構化的方式建立一個樣式表。在很多方面它都比CSS2整 潔和強大。與CSS最明顯的差別是句法：它基于縮進而且不單調。雖然這顯然違反了Python的規則，它依然是組織樣式的很好的主意。

Logicss Framework

Logic CSS 架構是用來減少開發符合web标準的xHTML布局的時間的一個由CSS檔案和PHP程式組成的集合。通常跨浏覽器表現行為(不是Meyer的reset 檔案或是用“*”)，排版支援文本字型大小調整(使用EMs) 和垂直居中，符合可定義的靈活的布局。

That Standards Guy CSS Framework

隻能調用單個樣式檔案

主樣式需要取得CSS認證(WCAG 1.0)；

跨浏覽器相容性—包括Internet Explorer (IE) 5.x for Mac；

IE Hacks使用獨立檔案；

快速建立模闆；

少量注釋/執行個體示範，可以節省時間來了解。

Emastic CSS Framework

Emastic 是一個CSS架構，它有連續的任務：探索陌生的新世界，尋找新生活和新的網站空間，大膽的去CSS架構尚未到達的領域。它是輕量的、在頁面寬度上比較人性化，在網格中使用固定和不固定的列寬。 Elastic 用“em”布局。