淺談大型網(wǎng)站中CSS樣式表的構(gòu)建

滕吉鵬

摘要：CSS樣式表能夠讓網(wǎng)頁內(nèi)容與外觀控制相分離，代碼更加簡(jiǎn)潔。但在大型網(wǎng)站中，功能模塊較多，模塊頁面風(fēng)格不盡相同，往往需要多個(gè)CSS樣式表文檔進(jìn)行控制，本文主要研究如何在大型網(wǎng)站中科學(xué)有效地組織編寫CSS文檔，使得頁面加載更加高效，維護(hù)更便捷。

關(guān)鍵詞：CSS 大型網(wǎng)站 構(gòu)建

中圖分類號(hào)：TP393092 文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1009-5349（2016）13-0244-01

CSS的出現(xiàn)不但彌補(bǔ)了HTML對(duì)元素屬性控制的不足，同時(shí)通過外聯(lián)式CSS代碼寫法，網(wǎng)頁內(nèi)容與樣式進(jìn)行了分離，實(shí)現(xiàn)了兩者的“解耦和”，因此使得樣式內(nèi)容可以被重復(fù)使用，大大提高網(wǎng)站開發(fā)和后期維護(hù)的效率。

對(duì)于中小型網(wǎng)站來說，由于頁面數(shù)量比較少，一般只需要1到3個(gè)CSS樣式表文檔，即可完成對(duì)整個(gè)網(wǎng)站的樣式控制，但當(dāng)網(wǎng)站到達(dá)一定規(guī)模以后，包含的模塊也越來越多，每個(gè)模塊中頁面風(fēng)格各不相同。如果CSS代碼過于集中，會(huì)造成代碼的不必要調(diào)用。而文檔過多，又會(huì)造成管理、維護(hù)、重構(gòu)不方便?？茖W(xué)有效地對(duì)整個(gè)站點(diǎn)的樣式代碼進(jìn)行架構(gòu)，合理地進(jìn)行文檔組織與調(diào)用，能夠讓文檔加載更加流暢，后期維護(hù)更加便捷。

一、樣式表構(gòu)建與編寫優(yōu)化原則

1.標(biāo)準(zhǔn)化原則

隨著手機(jī)平板等移動(dòng)端設(shè)備的增多，對(duì)CSS樣式表的編寫，提出了更嚴(yán)格的要求。只有代碼編寫規(guī)范化，標(biāo)準(zhǔn)化，才能更好地兼容各種不同的設(shè)備。

標(biāo)準(zhǔn)化主要體現(xiàn)在：屬性書寫順序；選擇器命名規(guī)則；頁面結(jié)構(gòu)控制；文檔命名與組織規(guī)則。

2.重構(gòu)性強(qiáng)原則

網(wǎng)站的定制化發(fā)展，要求頁面在針對(duì)不同時(shí)間不同人物時(shí)，能夠呈現(xiàn)出不同的風(fēng)格。CSS文檔的構(gòu)建，必須充分考慮頁面的重構(gòu)性。網(wǎng)站重構(gòu)不是一種技術(shù)，不是單純的css+div，更不是標(biāo)準(zhǔn)，是一種思想，是一種理念。真正的頁面重構(gòu)應(yīng)該包括頁面結(jié)構(gòu)、交互行為、內(nèi)容表現(xiàn)三層次的分離以及優(yōu)化，行內(nèi)分工優(yōu)化，以及以數(shù)據(jù)及體驗(yàn)為主導(dǎo)的交互優(yōu)化。

3.模塊化原則

以功能塊為單位進(jìn)行程序設(shè)計(jì)，最后通過模塊的選擇和組合構(gòu)成最終產(chǎn)品。這種軟件開發(fā)思想目前也被運(yùn)用在了網(wǎng)站前端開發(fā)中。如我們可以提取公用功能模塊，如導(dǎo)航、版權(quán)信息等，實(shí)現(xiàn)部分公用模塊的復(fù)用。

4.求簡(jiǎn)去繁原則

CSS代碼本身并不難，但在大型項(xiàng)目中，如果編寫不注意就會(huì)變得很多很亂。特別是團(tuán)隊(duì)開發(fā)時(shí)，問題就會(huì)更嚴(yán)重，因此高效簡(jiǎn)潔易懂也是文檔編寫追求的原則。主要需要注意以下幾點(diǎn)：不影響頁面的布局；去掉不必要的樣式；合并相同的樣式；盡可能縮小樣式的大小。

二、樣式表構(gòu)建優(yōu)化手段

1.文檔組織優(yōu)化

大型網(wǎng)站樣式表文檔組織沒有固定的規(guī)則，針對(duì)不同情況，有幾個(gè)基本策略可供參考：

（1）基于頁面結(jié)構(gòu)。我們可以針對(duì)頁面結(jié)構(gòu)比較相近的頁面，創(chuàng)建一個(gè)CSS樣式表文件進(jìn)行控制。將默認(rèn)字體、鏈接等共享屬性，單獨(dú)寫入一個(gè)全局CSS文檔。如global.css、index.css、content.css、list.css。

（2）基于頁面布局。如果多張頁面中有相同外觀的元素，如網(wǎng)站的導(dǎo)航條，底部版權(quán)，頭部廣告，側(cè)欄等?？梢葬槍?duì)這些元素，單獨(dú)創(chuàng)建CSS文檔加以控制。

（3）基于標(biāo)記元素。如果整個(gè)網(wǎng)站中不同頁面中有很多表單、標(biāo)題、項(xiàng)目列表等元素的外觀較為統(tǒng)一，可以單獨(dú)創(chuàng)建一個(gè)樣式表文檔，控制常用元素的外觀，需要的頁面中加以調(diào)用即可。

（4）基于網(wǎng)站功能模塊?？梢葬槍?duì)同一功能模塊的相關(guān)頁面，設(shè)計(jì)一個(gè)樣式表文檔控制外觀，如訂單相關(guān)、管理員后臺(tái)，新聞搜索與顯示等。命名為orders.css、admin.css、shownews.css等。

2.Reset優(yōu)化

許多網(wǎng)站的reset.css的文件貪大貪全，造成代碼過于繁雜。筆者認(rèn)為，reset.css重置文件的編寫應(yīng)根據(jù)自身站點(diǎn)進(jìn)行重置。有些地方可以適當(dāng)精簡(jiǎn)。如有些不常用的標(biāo)簽，不需要重置。

3.HTML標(biāo)簽的語義化

“語義化”指的是計(jì)算機(jī)在更少的人為設(shè)定解釋的情況下能夠研究和收集信息，讓網(wǎng)頁直接能夠被瀏覽器理解，提升執(zhí)行效率。HTML 標(biāo)簽語義化是讓大家直觀的認(rèn)識(shí)標(biāo)簽（markup）和屬性（attribute）的用途和作用，如Hx系列一看就明白是標(biāo)題，HTML5中更是增加了許多語義標(biāo)簽，如header、article、aside等。

4.合理使用嵌入式樣式

在一些較為重要，或訪問次數(shù)相當(dāng)多等頁面（如首頁、訂購頁、詳情頁等）中，可以考慮使用嵌入式CSS代碼，既能防止加載過多等無用代碼，在帶寬較為緊張的情況下也能讓重要的內(nèi)容可以正常顯示。

三、結(jié)語

大型項(xiàng)目的CSS樣式架構(gòu)經(jīng)常需要在追求靈活還是嚴(yán)謹(jǐn)、高效還是可擴(kuò)展等問題上糾結(jié)，解決方法還是需要具體問題，具體分析，應(yīng)該說沒有最優(yōu)秀，只有最適合的架構(gòu)方案。

參考文獻(xiàn)：

[1] 張明.網(wǎng)頁設(shè)計(jì)中的CSS技術(shù)及優(yōu)化分析[J].信息與電腦（理論版），2016（1）.

[2] 李夢(mèng)，江山，黃幸，安立鵬.基于前端的WEB優(yōu)化設(shè)計(jì)[J].電子設(shè)計(jì)工程，2016（9）.

[3] 曹方明.網(wǎng)頁設(shè)計(jì)中的CSS應(yīng)用技術(shù)[J].數(shù)字化用戶，2014（6）.