入口網站與大型網站的CSS架構與組織

對於大型門戶，海量資訊平臺及多模組，多區域化網站，更需要對CSS，XHTML的標準化，符合語意的HTML框架，複用性強的CSS代碼，這些才能保障你的網站，具有很好的「地基」。

第一部：關於構建CSS框架我們要實現的目的：

1.實現標準化，具備主流平臺適應性的前端實現；
2.快速開發，在網站風格確定後，前端不應該成為整個專案裡瓶頸；
3.重構的需求， 盡可能的讓類和區塊樣式可重用；
4.分離結構和表現的需求，遵守了語義化結構的約定;
5.構架完全符合金融網特色的CSS框架。
6.對代碼進行必要的搜尋引擎優化。

第二部：關於CSS命名的一些約定：

1.不使用大寫形式的類名和id名;
2.盡可能使用描述性的英文單詞的組合作為類名和id名;
3.id名及類名的多個英文單詞之間使用「_」短橫線分隔;
4.按區域進行描述編號 例：main01_div01_ul01 (可以理解為主體第一區域 第一DIV下的第一個UL)

下來我們要對整個網站及設計稿進行分析，去做符合自己門戶結構特色的CSS框架。 我們以新浪網為例子進行網站結構分析，整個頁面分為：首頁，更多頁，內容頁，專題頁，資料中心，新聞中心，頻道頁，廣告......

我們對這些頁面進行整理，去發現他們的公共部分：CSS的樣式,及區域，模組的碎片。 我們需要做的是把這些公有的部分提出來，我們可以把CSS分以下幾類：

主體樣式表：sjweb.css
font(字體樣式，字型大小，顏色的集合)
layout(框架結構 集合)
global( 全域預設樣式集合)
component（組成頁面部分樣式表，模組碎片集合）
這些講統統的被import到sjweb.css主體樣式表裡，主體樣式表做為一個loader載入新的外來樣式，比如廣告樣式表。

這樣這些頁面只需要寫一點點 屬於自己特殊要求的CSS樣式代碼就可以了。

在構建這個CSS框架的時候有很多細節的東西最好能統一化，比如：行間距，模組之間間隔距離等。

規則：

1.所有area之間，模組之間，間距上下左右為：8 Pixel ;
2.新聞清單顏色#333 ;
3.新聞清單行間距20 pixel；
...... 等等

調整環境：IE7,ff,IE6,IE5.x,Opera