構建CSS樣式表的最佳方式

Question

我對CSS比較陌生，但我似乎已經很好地爲新手提供了語言。然而，雖然我閱讀過的許多教程經常警告「正確組織和構造你的樣式表」（我當然可以看到爲什麼現在我自己創建了一些相當長的樣式表），但是我不能爲我的生活找到任何關於標準格式的樣式表或佈局的邏輯模式，使得以後的人類閱讀變得容易。

例如，我是否爲頁面的每個「地理」部分（標題，行1，行2，文章1等）創建了註釋括號部分，並將該部分的所有樣式保留在這些註釋邊界內？問題似乎是，當我有其他部分重新使用的樣式 - 並將它們放在頁面範圍樣式的部分下面時，就會否定按部分對它們進行分組的目的。同樣，通過基於文本樣式，佈局樣式等進行分組來構造我的樣式表似乎更加令人困惑。

有沒有「良好做法」？我知道這聽起來很愚蠢，但似乎不管你用HTML和CSS做什麼，有人準備告訴你它的錯誤，不好的做法或非語義，我感到困惑。我希望我的代碼能成爲我的工作的一個很好的例子，以防僱主在將來要檢查它。

Answer 1

我從來沒有真正教過，但是我可以讓你知道我如何組織我的CSS文檔。正如你所說，我喜歡把它分成「地理」區域......即適用於標題，邊欄，主要內容，頁腳等的規則。然後，在這些之下，我添加了非常具體的規則，說如果我需要在特定頁面上創建表單或表格。最後我在底部添加一個「通用Gubbins」部分，當我添加可能適用於所有的通用規則時。

哦，是的，我還想將設計師的調色板添加到頂部以供快速參考。

例如...

/* 
PALETTE: 
dark grey : #555555; 
pink  : #d93575; 
*/ 

/* HEADER */ 
#header {...} 
#header ul {...} 

/* SIDE BAR */ 
#side {...} 
#side ul {....} 

/* CONTENT */ 
#content{...} 
#content p {....} 

/* FOOTER */ 
#footer{...} 
#footer div {....} 

/* FORMS */ 
form {...} 
input {...} 

/* GENERAL GUBBINS */ 
.center {...} 
strong {...} 
floatleft {...} 

Answer 2

這些人勸你（http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/）「與自上而下的組織結構樣式表」。我經常使用多個樣式表。例如，在MVC中 - 您可以在每個視圖的基礎上使用註冊表樣式。這樣，您可以將特定於視圖的樣式放入特定的樣式表中，而不會混淆您的「共享」或「佈局」樣式。