關於CSS基礎架構的學習

標籤：blog   class   code   c   tar   http   

什麼是CSS基礎架構?

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

為什麼需要研究和使用它?

在當前瀏覽器很多 而且各有差異的情況下 如何統一樣式 相容大部分瀏覽器是很有必要的 從具象的表現中抽出抽象的模組來重複使用，是減少使用者下載、方便團隊及個人開發最重要的手段。所以CSS架構就很有必要了

現在有哪些比較著名的架構?

960gs

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

YUI 2: Grids CSS

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

渴切-開源中文css架構

渴切(Cutter.css)是一個開源中文 (X)HTML/CSS 架構 ,它的目的是減少你的css開發時間。它提供一個可靠的css基礎去建立你的項目,能夠用於網站的快速設計,通過重設和重建瀏覽器標準，可以讓每個網站防 止枯燥的跨瀏覽器安全色性測試。你可以將他理解成一套模板，裡麵包含了大多數網站中所需要的那些css類。他很小，只有四個檔案而已。總共不到6KB。

Blueprint

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

BlueTrip

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

Bootstrap

Bootstrap是Twitter推出的一個用於前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML架構。它是一款簡潔、直觀、強悍的前端開發架構，讓web開發更迅速、簡單。其內建的js以及css可以完成絕大多數常用的網頁特效與響應功能，是一款不錯的架構。Elastic CSS

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

Easy

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

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

Tripoli

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

SenCSS

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

 

 一般開發順序

格式化CSS(CSS reset)->布局->基本樣式->列印樣式->表格表單導航等->具體某種應用情境(大型塊狀布局)等

開發工具

首先應該瞭解一下CSS前置處理器.

CSS的不是一種程式設計語言。你可以用它開發網頁樣式，但是沒法用它編程。也就是說，CSS基本上是設計師的工具，不是程式員的工具。在程式員眼裡，CSS是一件很麻煩的東西。它沒有變數，也沒有條件陳述式，只是一行行單純的描述，寫起來相當費事。很自然地，有人就開始為CSS加入編程元素，這被叫做"CSS前置處理器"（css preprocessor）。它的基本思想是，用一種專門的程式設計語言，進行網頁樣式設計，然後再編譯成正常的CSS檔案。

比較好用的是LESS、SASS

如何使用可以參見LESS中文網和SASS官網。

我偏好於less.而開發工具的話可以選擇使用WebStorm或Brackets都可以使用外掛程式把.less檔案自動編譯成CSS

 

我的開發過程:

第一步

定義全域CSS變數

第二步

混合CSS 類似於宏定義的函數

第三步

Reset CSS

第四步

定義body div等整體樣式

第五步

定義form btn a table 等的樣式

第六步

定義input nav的樣式

最後代碼大概在1000行左右 等我完善好了再貼上