滕吉鵬

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

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

中圖分類號：TP393092 文獻標識碼：A文章編號：1009-5349（2016）13-0244-01

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

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

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

1.標準化原則

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

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

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

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

3.模塊化原則

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

4.求簡去繁原則

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

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

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

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

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

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

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

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

2.Reset優(yōu)化

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

3.HTML標簽的語義化

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

4.合理使用嵌入式樣式

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

三、結(jié)語

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

參考文獻：

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

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

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