淺談大型網站中CSS樣式表的構建

滕吉鵬

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

關鍵詞：CSS 大型網站 構建

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

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

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

一、樣式表構建與編寫優化原則

1.標準化原則

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

標準化主要體現在：屬性書寫順序；選擇器命名規則；頁面結構控制；文檔命名與組織規則。

2.重構性強原則

網站的定制化發展，要求頁面在針對不同時間不同人物時，能夠呈現出不同的風格。CSS文檔的構建，必須充分考慮頁面的重構性。網站重構不是一種技術，不是單純的css+div，更不是標準，是一種思想，是一種理念。真正的頁面重構應該包括頁面結構、交互行為、內容表現三層次的分離以及優化，行內分工優化，以及以數據及體驗為主導的交互優化。

3.模塊化原則

以功能塊為單位進行程序設計，最后通過模塊的選擇和組合構成最終產品。這種軟件開發思想目前也被運用在了網站前端開發中。如我們可以提取公用功能模塊，如導航、版權信息等，實現部分公用模塊的復用。

4.求簡去繁原則

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

二、樣式表構建優化手段

1.文檔組織優化

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

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

（2）基于頁面布局。如果多張頁面中有相同外觀的元素，如網站的導航條，底部版權，頭部廣告，側欄等。可以針對這些元素，單獨創建CSS文檔加以控制。

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

（4）基于網站功能模塊。可以針對同一功能模塊的相關頁面，設計一個樣式表文檔控制外觀，如訂單相關、管理員后臺，新聞搜索與顯示等。命名為orders.css、admin.css、shownews.css等。

2.Reset優化

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

3.HTML標簽的語義化

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

4.合理使用嵌入式樣式

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

三、結語

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

參考文獻：

[1] 張明.網頁設計中的CSS技術及優化分析[J].信息與電腦（理論版），2016（1）.

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

[3] 曹方明.網頁設計中的CSS應用技術[J].數字化用戶，2014（6）.