網(wǎng)站建設(shè)中如何寫規(guī)范的CSS樣式

前幾天有寫過一篇文章，關(guān)于web標(biāo)準(zhǔn)的。里面有這樣有這樣的一句話，網(wǎng)頁是由三個部分組成的：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。結(jié)構(gòu)化標(biāo)準(zhǔn)語言有：XHTML和XML；結(jié)構(gòu)化的語言就是通常的CSS。所以CSS的標(biāo)準(zhǔn)規(guī)范也是非常重要的，在零度網(wǎng)絡(luò)招聘前端的職位的時候我們就會安排面試人員去做一個簡單的前端頁面，所考察的就是規(guī)范程度。所以網(wǎng)站的建設(shè)好壞很多的細(xì)節(jié)尤為的重要。今天我們就說說css的規(guī)范。

網(wǎng)站中關(guān)于css的命名也是有說法的，比如我們不能用大寫的形式來表示類名和ID名；盡量多的試用描述性的單詞和詞組作為類名的命名或者ID的命名；ID名及類名的多個英文單詞之間使用“_”短橫線分隔；按區(qū)域進(jìn)行描述編號 例：main01_div01_ul01 (可以理解為主體區(qū)域 DIV下的個UL) 。

網(wǎng)站CSS的框架要已實現(xiàn)為標(biāo)準(zhǔn)，具備主流平臺適應(yīng)性的前端實現(xiàn)；快速開發(fā)，在站點風(fēng)格確定后，前端不應(yīng)該成為整個項目里瓶頸；重構(gòu)的需求，盡可能的讓類和區(qū)塊樣式可重用；分離結(jié)構(gòu)和表現(xiàn)的需求，遵守了語義化結(jié)構(gòu)的約定;構(gòu)架完全符合金融網(wǎng)特色的CSS框架。對代碼進(jìn)行必要的搜索引擎優(yōu)化。

下來我們要對整個網(wǎng)站及設(shè)計稿進(jìn)行分析，去做符合自己門戶結(jié)構(gòu)特色的CSS框架。我們以新浪網(wǎng)為例子進(jìn)行站點結(jié)構(gòu)分析，整個頁面分為：頁，更多頁，內(nèi)容頁，專題頁，數(shù)據(jù)中心，新聞中心，頻道頁，廣告……我們對這些頁面進(jìn)行整理，去發(fā)現(xiàn)他們的公共部分：CSS的樣式,及區(qū)域，模塊的碎片。我們需要做的是把這些公有的部分提出來，我們可以把CSS分以下幾類：

主體樣式表：sjweb.css font(字體樣式，字號，顏色的集合)  layout(框架結(jié)構(gòu) 集合)  global(全局默認(rèn)樣式集合)  component（組成頁面部分樣式表，模塊碎片集合）這些講統(tǒng)統(tǒng)的被import到sjweb.css主體樣式表里，主體樣式表做為一個loader加載新的外來樣式，比如廣告樣式表。 這樣這些頁面只需要寫一點點 屬于自己特殊要求的CSS樣式代碼就可以了。 在構(gòu)建這個CSS框架的時候有很多細(xì)節(jié)的東西知名能統(tǒng)一化，比如：行間距，模塊之間間隔距離等。 規(guī)則： 1.所有area之間，模塊之間，間距上下左右為：8 Pixel ;2.新聞列表顏色#333 ;3.新聞列表行間距20 pixel；