適用於大型網站的CSS最佳實踐

到目前爲止，我在網頁設計方面的經驗一直是非常小規模的網站和博客（頁面樣式中沒有太多的多樣性）。但是，我現在開始處理一些規模更大的網站，我想通過創建可伸縮和可維護的css文件/結構來開始。適用於大型網站的CSS最佳實踐

目前，我將樣式應用於網頁的方法是給每一個網頁的不同ID在身上，然後當我設計一個網頁我的CSS規則看起來就像這樣：

body#news section .top { rules }

當然，在大型網站上應用CSS還有一個更可維護的方法嗎？

來源

2011-03-02 Moses

避免給每個頁面一個body標籤具有唯一的ID。爲什麼？因爲如果一個頁面需要獨特的風格，它應該有它自己的樣式表。

我會經常有一個main.css樣式表，樣式表，我的網站的各種相似的部分（如一個administration.css一個管理部分，假設在管理部分的頁共享相似的外觀和感覺），然後給予一定的獨特的網頁他們自己的樣式表（如signup.css）。

然後我按照從最少到最具體的順序包含樣式表，因爲如果遇到兩個其他方面相同的規則，將使用最「最近」包含的樣式表中的規則。

舉例來說，如果我有main.css：

a { color: red; }

...出於某種原因，我希望我的註冊頁面有藍色的鏈接：

a { color: blue; }

第二條規則將覆蓋首先如果我的signup.css被包括在main.css之後。

<link rel="stylesheet" href="/stylesheets/main.css"> 
<link rel="stylesheet" href="/stylesheets/signup.css">

來源

2011-03-02 02:04:04 ClosureCowboy

慣於本作修正錯誤的是要難得多，因爲你必須爲每個頁面維護兩個樣式表，而不僅僅是一個？ – Moses 2011-03-02 02:10:52

如果有的話，它會使修復bug變得更加簡單 - 我的樣式表不會太長和混亂，因爲這些文件在邏輯上是分裂的。此外，所有最新的瀏覽器開發者工具（IE7，IE8，Firefox，Chrome，Opera和Safari）都會向您顯示特定規則來自哪個樣式表。 – ClosureCowboy 2011-03-02 02:13:24

當我要抓取的很多次要樣式表只有幾行時，這會讓我覺得有點浪費，請求額外的HTTP請求。儘管如此，我認爲在速度上的小損失對於保持可維護的網站來說是一個體面的權衡。 – Moses 2011-03-02 02:21:58

你會發現什麼是大多數網頁都會有類似的設計方面喜歡排版和基本格式，這意味着你不需要申請和id body標籤。

您應該嘗試使用描述頁面結構（頁眉，頁腳，側邊欄等）的id，它們可以在需要的每個頁面上重複使用。只有當新聞或項目等特定區域的樣式時，你應該開始使用id = news。

在一天結束時，沒有正確和錯誤的答案。儘量保持可重用的CSS樣式，同時儘量不要使用不必要的標籤來超載你的標記。

來源

2011-03-02 02:04:27 sweetroll

總是使用CSS的類。這將允許您重複使用更多的代碼。由於每個頁面可以有多個重複的類，因此您可以真正創建一些小代碼。

CSS從右向左分析。所以在上面的例子中，將在此爲了找到你的選擇：

元素與類名.TOP類名.TOP 元素是在部分標籤與類名.TOP 元素是在一節的標籤也包含在#news元素 ...等中。

用這種方式來看，你應該儘量保持你的選擇器儘可能短。爲.top創建基礎樣式，然後如果您需要爲#news部分編寫自定義內容，則可以使用#news .top。

總是嘗試使用最短的規則。

margin:0 5px;

在

margin:0 5px 0 5px;

這是基本的，但你有多少人不這樣做感到驚訝。

而且你可以學習什麼短路：

這是非常有幫助的

ex: font:bold 12px Helvetica, Arial, sans-serif;

的一件事是，如果你按字母順序排列規則。特別是如果您使用CSS3 -webkit-和-moz-屬性。我得到了很多的推背就這一個，但我有12+的開發工作，我已經看到了

.myClass { color:#f00; /* more stuff */ color:#fff; }

如果他們是按字母順序排列，然後你會避免重複代碼。

來源

2011-03-02 02:08:43 Seth

綜上所述上述答案，並給予一定的補充意見：

你把一切都放在一個CSS，並使用獨特的機身編號爲特定頁面的設置。這種方法可以加速您的網站，因爲您正在保存HTTP請求（瀏覽器只緩存一個文件）
您每頁都有一個CSS，加上一個全局CSS來處理全局設置，頁眉，頁腳和其他出現的元素到處。如果你有多個開發人員工作，這更友好 - 由於同一個文件的更新而導致衝突的可能性更小。即使你使用像SVN這樣的版本控制系統（並且你需要一個大的網站），擁有不同的文件總是比較安全的。
您可以通過分離文件，然後使用縮小器將所有這些文件合併並壓縮到一個「編譯」CSS中，從而獲得兩全其美的效果。這更復雜，您需要將其納入您的工作流程，並且使前端調試變得更加困難。見Any recommendations for a CSS minifier?。

來源

2011-03-02 02:21:13

有在這裏一個非常豐富和詳細的解答：Managing CSS Explosion

你也可以檢查出面向對象的CSS：http://www.slideshare.net/stubbornella/object-oriented-css

或CSS系統：http://www.slideshare.net/nataliedowne/css-systems-presentation

來源

2011-03-07 16:50:34 andrej

適用於大型網站的CSS最佳實踐

回答

相關問題