前幾天有寫過一篇文章,關於 web 標準的。裏面有這樣有這樣的一句話,網頁是由三個部分組成的:結構(Structure)、表現(Presentation)和行為(Behavior)。結構化標準語言有:XHTML 和 XML;結構化的語言就是通常的 CSS 。所以 CSS 的標準規範也是非常重要的,在 SEO 站羣招聘前端的職位的時候我們就會安排面試人員去做一個簡單的前端頁面,所考察的就是規範程度。所以網站的建設好壞很多的細節尤為的重要。今天我們就説説 css 的規範。

網站中關於 css 的命名也是有説法的,比如我們不能用大寫的形式來表示類名和 ID 名;儘量多的試用描述性的單詞和片語作為類名的命名或者 ID 的命名;ID 名及類名的多個英文單詞之間使用 “_” 短橫線分隔;按區域進行描述編號 例:main01_div01_ul01 (可以理解為主體區域 DIV 下的個 UL) 。

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

下來我們要對整個網站及設計稿進行分析,去做符合自己門户結構特色的 CSS 框架。我們以新浪網為例子進行站點結構分析,整個頁面分為:頁,更多頁,內容頁,專題頁,資料中心,新聞中心,頻道頁,廣告……我們對這些頁面進行整理,去發現他們的公共部分:CSS 的樣式, 及區域,模組的碎片。我們需要做的是把這些公有的部分提出來,我們可以把 CSS 分以下幾類:

主體樣式表:sjweb.css font(字型樣式,字號,顏色的集合)  layout(框架結構 集合)  global(全域性預設樣式集合)  component(組成頁面部分樣式表,模組碎片集合)這些講統統的被 import 到 sjweb.css 主體樣式表裏,主體樣式表做為一個 loader 載入新的外來樣式,比如廣告樣式表。 這樣這些頁面只需要寫一點點 屬於自己特殊要求的 CSS 樣式代碼就可以了。 在構建這個 CSS 框架的時候有很多細節的東西知名能統一化,比如:行間距,模組之間間隔距離等。 規則: 1. 所有 area 之間,模組之間,間距上下左右為:8 Pixel ;2. 新聞列表顏色 #333 ;3. 新聞列表行間距 20 pixel;