組織大型網站的CSS

Question

我有一個更一般的設計問題與CSS和網站有關。我知道盡可能規範化代碼並避免重複是很好的計算機科學。因此，對我來說，至少在理論上，組織一個網站的樣式表時會這樣做。

因此，當我開始使用我最近的網站時，我開始採用這種相同的理念。它工作正常，我的前幾頁，雖然我只在Firefox測試...雖然我發現這個理念很快就崩潰了，但是隨着我的網站的增長和我添加頁面，多個佈局（和瀏覽器）。最終，隨着時間的推移我已經搬到了以下方法：

1. 我有我的站點中的每個母版頁佈局非常有限的頂級css文件，它包含了跨佈局衆所周知的樣式，以及CSS類爲主頁面。

2. 我爲每個頁面保留特定的css樣式。

3. 我一直爲嵌入頁面元素的特定CSS樣式/控制

我結束了走這條路，這樣我可以相信，在一個頁面上的變化會不小心打破其他頁面的網站產生的在很多回歸bug中。

其他人在接近這個時做了什麼？這是一個好還是壞的方法......我確實看到了這種方法的弊端，有些頁面非常相似，所以做出重大改變意味着改變更多的CSS代碼，我也覺得每天都會超過這個。

其他開發人員對這種理念有什麼看法？好？壞？只是好奇真的...

對我來說，其中我的理想之間的差異（我試圖保持非常緊密的代碼），以及在一個頁面上改變要求打破20個其他頁面的挫折，因爲我改變了一個div的寬度幾個像素（例如擾亂另一頁上的浮動）。

感謝您的輸入

Answer 1

就像任何其他類型的代碼，如果你是所有的地方複製你的CSS代碼，你是在自找麻煩。隨着時間的推移，維護將變得越來越困難。

不影響其他頁面的頁面更改不會有問題的最佳方式是有一個可以驅動您的UI佈局和設計的樣式指南。如果您的風格指南定義了用於給定設計元素的HTML和CSS類，那麼它們將始終在所有頁面上顯示相同。如果需要更改特定頁面的元素，請將HTML更改爲使用不同的類，然後爲該類創建新的CSS（並將其添加到樣式指南中以供重用）。風格指南還允許您確保HTML在所有在該網站上工作的開發人員是統一的，這意味着在進行更多開發時，更改CSS的可能性更小，從而導致問題。

您需要用CSS記住的另一點是，您在頁面上創建和引用的每個.css文件都是HTTP請求。如果每個頁面和控件都有其自己的CSS文件，那麼您通過讓每個頁面請求的總請求下載時間陷入困境，真的會傷害用戶在網站上的體驗。它也使得它的瀏覽器不太可能緩存。css文件，因爲緩存的空間有限，所以如果你繼續填充越來越多的.css文件，它們將會更快地從緩存中轉儲。是的，您可以在處理程序中以編程方式組合.css文件，以便您的頁面只在每個頁面上發出一個請求，但是這樣會產生額外的服務器開銷並且仍然存在緩存問題（除非您的站點上的所有.css文件都有一個請求，這無論如何都會破壞你在這裏試圖做的目的）。