css架構，一把鋒利的劍

標籤：style   http   io   使用   ar   java   for   檔案   資料   

CSS 架構是一系列 CSS 檔案的集合體，包含了基本的元素重設，頁面排版、網格布局、表單樣式、通用規則等代碼塊,用於簡化web前端開發的工作，提高工作效率。

產生原因

互連網行業已經發展了多年，瀏覽器也從最早流行的NS到現在的FF3.IE7等等……前端開發工程師的職位也誕生了。近幾年在web開發中，有個非常火的詞——“架構”。YUI、JQuery、Prototype這些javascript架構在開發網站時，確實成為前端開發工程師的手中利器。為什麼呢？因為架構是包含工具、函數庫、約定，以及嘗試從常用任務中抽象出可以複用的通用模組，讓設計師與程式員避免重複開發。

編寫css也是一樣，從最初只是定義文字顏色、內容排版，到現在定義所有的表現。css架構也漸漸被重視了，因為大家都認識到：從具象的表現中抽出抽象的模組來重複使用，是減少使用者下載、方便團隊及個人開發最重要的手段。

css架構的特徵

1.抽象出常用的css樣式,高再可用性,高移植性

2.有固有的定義,詳細的文檔及開發特點

3.高相容性,可以相容流行的瀏覽器

4.以css為主,但不一定全部是css,可能有一些js(或者其他)指令碼用於相容瀏覽器

css架構的開發順序

a) 格式化 reset.css

格式化css的真正好處是能夠快速啟動工作，你可以在新的HTML檔案裡引入架構，不用再處理重設padding 和 margins，實現統一的排版、瀏覽器下的相同表現。

b) 布局layout.css

定義頁面是二欄還是三欄，是全屏還是1024×768……

一個網站的設計可能有很多種布局，但是大多數都是由幾個具有複用性的布局組成，選擇性的引入所需要的布局，可以很快地應用所期望的頁面配置。

c) 基本樣式 type.css

定義body、h1-h6、a:link-a:active、p等的字型大小和顏色。

基本樣式的css引用，譬如將ul定義class為“ul-text”，用來展現相同的icon、行間距、連結色彩。

還可以像這樣應用：class=”ul-text square”，li前展現的是方型的icon。

d) 表格修飾 table.css

定義table、tr、td、th、thead、tfoot、tbody、caption等標籤的表現。

和基本樣式一樣，但是表格在現有網站的展現形式幾乎都是處理資料，所以分開存放引用。譬如在table上應用table-style-1便是黑色邊框的表格，table-style-2便是黃色邊框的表格。

e) 表單修飾 form.css

定義fieldset、label、button、input 、select、textarea這幾個標籤的表現。

大多數網站的表單、按鈕、輸入框幾乎都是一樣的。之所以引入這個css，是為了便於統一在各個瀏覽器中的展現。預設的按鈕、輸入框等在各個瀏覽器下的展現區別很大，雖然在格式化的css中已經初步的統一，但是輸入框的邊框，按鈕的樣式都是需要在這個css中定義的。無奈的是select無法做到統一，如果考慮到用js實現的話，這個成本太大了點。

f) 列印修飾 print.css

修飾列印輸出的頁面。

g) 包含其他css的css

frontpage.css、list.css、detail.css、register.css等等

根據各種引用去引入相應的css。譬如list頁面中沒有需要表格的修飾，那就不引入table.css。以節約代碼量。

css架構的優點

a) 提高開發效率。

b) 正式名稱定義，便於維護。

c) 規範項目開發流程

d) css代碼更清晰、簡單。html代碼更合理。

e) 大規模項目中可以減少使用者下載

css架構的弊端。

a) 學習成本提高。你需要瞭解整個架構，需要閱讀架構的文檔。

b) css架構對於一個小項目等頁面來說很臃腫。架構中可能有大部分你用不到的代碼。

c)可能會無法協助你的技術提高。太依賴架構，以至於很難排除bug。包括架構中本身就帶的bug。

d) 選擇自己需要的架構與開發架構都很痛苦。寫到後面發現越來越不靈活，越來越臃腫。

常用的css架構: 960gs

960 像素的頁面寬度似乎成為了一種設計標準，在當前各種解析度下，能夠很好地展現網頁內容。提供較為常用的尺寸來簡化網頁設計過程，使工作簡單高效。 YUI 2: Grids CSS

芒果曾經介紹過由雅虎開發小組推出的 YUI，而這個 YUI Grids CSS 正是其中的一部分。作為最著名的 CSS 架構之一，YUI Grids CSS 提供了四種預設頁面寬度，六種預設模板。其中的負 Margin 技術，使用度量單位 em，清除布局浮動等技術非常值得學習和借鑒。 Blueprint

Blueprint 是一款成熟的 CSS 架構，它將布局 (layout)、排版 (typography)、組件 (widget)、重設 (reset)、列印 (print) 等分放到不同的 CSS 檔案中。在網頁設計時就減少了引入的代碼，提高了頁面載入效率。 BlueTrip

BlueTrip 是一個整合了BluePrint & Tripoli 架構的做好的部分；Hartija 的列印樣式； 960gs的簡潔；Elements 表徵圖的一個css架構。為你提供一個好用的樣式集合和一個製作網站的通用的方法。這樣你就可以集中精力搞設計了。 Elastic CSS

Elastic 是一個簡單的 CSS 架構用來對網頁進行布局。Elastic 可實現各種各樣常見的網頁布局。 Easy

市面上流行的JQUERY組件功能都被納入其架構中，你只要直接使用這個架構，不用學習複雜的AJAX JQuery文法，非常方便。 EZ-CSS

EZ-CSS是一個輕量級，瀏覽器友好，便於使用的CSS架構。用於建立CSS+Div的頁面複雜布局（layouts）。 Tripoli

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

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

它為你CSS重複的部分提供了合理的樣式，這樣你就能更加關注於自己網站的樣式。SenCSs不像其他CSS架構那樣，它不包含各種雜亂的配置樣式或是預定義的柵格系統，那SenCSs能剛什麼呢？baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms 等等都是SenCSs所能辦到的

css架構，一把鋒利的劍