我在處理（複雜）Web應用程序時感受到的最具挑戰性的事情之一就是組織CSS。這裏有我們在多個項目上嘗試的不同方法。你如何在你的項目中組織CSS？
1：爲每個網頁/模塊都有不同的樣式表。
很明顯，我們對網絡應用程序很陌生，而且這種方法導致了太多的樣式表和太多的樣式重複。我們在整個應用程序中實現一致性很困難。
2：在類似的網頁上共享一個共同的樣式表。
這個工作很好，直到它變得太複雜了。此外，我們發現我們有太多例外，這些例外仍然導致對特定情況下的常見樣式進行調整，如果做得不正確可能會影響應用程序的不同部分，並且在某些時候變得困難。還有一個龐大的開發團隊（跨越不同的時區）和艱難的項目時間表並沒有幫助我們的事業。
儘管＃2有效，但我們仍然看到我們的產品仍然沒有像我們希望的那樣具有類似的UI質量和一致性。
是否有任何CSS樣式準則，應該引用非常複雜的Web 2.0應用程序。其他人如何維護他們的樣式表？
您想利用CSS的級聯特性和繼承規則的方式。
先編碼最一般的情況，然後更改具體細節。
對於一個正常大小的項目，這根本不應該失控。
要更清楚地看到事物，可以使用索引表並從中調用其他樣式表。如果您想進行更改，您將知道要使用哪種樣式表，並且可以節省時間。以下是我的一個主要例子。
/*
This is the CSS index page. It contains no CSS code but calls the other sheets
*/
@import url("main/reset.css");
@import url("main/colors.css");
@import url("main/structure.css");
@import url("main/html-tags.css");
@import url("main/sign-up-sign-in.css");
@import url("main/pagination.css");
@import url("main/menu-items.css");
@import url("main/teachers-list.css");
@import url("main/footer.css");
@import url("main/misc-custom-sections.css");
@import url("main/error-messages.css");
祝你好運找到你自己的風格。
我使用一個mastersheet template.css，其樣式我的主要模板。對於任何需要獨立模板的站點，如果模板很短，我可以將它放在站點頭部，或者爲該模板創建一個新工作表。
理想情況下，我想設計template.css文件以靈活地覆蓋大多數情況。
我發現自己處於類似的情況。
首先，確保您有效地使用CSS。如果你不覺得自己是使用CSS的絕對專家，那麼花點時間研究一下，你將大大減少冗餘，並最終生成一個更容易處理的樣式表。
在大多數情況下，如果您將所有樣式合併爲一個文件，並且實際上將樣式分割爲數十個文件，以確保排除任何不會被使用可能會導致更長的加載時間，因爲所有的額外請求。但正如你所知，一個大規模的CSS文件可能會很快成爲頭痛的問題。
考慮這個黑客達成妥協。使用您選擇的語言（我的PHP）來提供您的CSS。我的意思是包括你的樣式文件是這樣的：
<link rel="stylesheet" type="text/css" href="styles.php" />
，有該文件的標題與文字/ CSS內容類型歸還，並有文件
一）拉動多個樣式表成一個文件 和/或 b）中改變樣式如何根據不同的參數（被加載文件，用戶數據，一天中的時間等）
A是一個好的解決方案的整體降低發育頭痛和頁面級寫加載開銷。 B可能需要您設置適當的文件過期日期，以避免瀏覽器忽略您希望在上次訪問時下載的內容的任何新樣式。既然通常只需要靜態樣式表和動態編寫的元素類/ ID名稱就可以在B中完成同樣的事情，但它通常不是一個理想的解決方案，除非您正在做一些非常奇怪的事情。
並讓設計師在這類東西方面給你提供建議。通常，我們的開發人員很難將我們的頭圍繞在高效CSS的一些細節以及在特定領域進行培訓的人員。
我通常嘗試按可視元素對我的CSS進行分組，並且只爲給定頁面包含相關樣式表以保持加載時間較短。使用PHP或其他任何環境來動態地將所需的樣式表合併到一個給定頁面的單個樣式表中是一個很好的解決方案。
幫助我的一件事是我實際上爲我的CSS創建了僞命名空間。我知道CSS 3有名稱空間的支持，這使得它更容易，但因爲有些瀏覽器不支持它，這是我做的：
儘管設計者認爲這是冗長的，但它使得在文件系統中找到特定的css類非常容易，而且沒有加載時間的問題。另外，你不會有一個設計者/開發者覆蓋另一個類的問題。
如果您可以讓每個人都能正確使用級聯並將您的目標強度降至最低，那麼保持css文件更容易。
確保元素繼承樣式，並且覆蓋不會太重會讓您的css變得瘋狂。通過這樣做，您可以讓自己擁有2或3個佈局/基礎樣式和覆蓋樣式表。如果您對進入佈局/基礎樣式表的內容施加嚴格的控制級別，並定期進行重新評估覆蓋表中的內容以查看可以移動到基礎的內容以及可以簡化的內容，則可以將自己釋放讓人們隨意超越，還能保持控制蠕變。
有我的理論...
我已經在這很多次了。首先，在早期，我曾經只是做一個樣式表，裏面的所有東西都是舊時代，而不是很多。然後我決定採用你的第二種方法，第一種我很幸運地認爲這是一個錯誤，太多的代碼和碎片漂浮在附近......
第二種方法很好，直到你開始提問時。 我的意思是：
該div的背景風格應該放在graphic.css還是layout.css中？
字體樣式應該在fonts.css中還是在佈局中，當涉及到P的寬度時？
如果圖標位置div的標題的邊距轉到graphic.css或layout.css或fonts.css（對於圖標使用相同的聲明會更簡單，文本和該職位......）？
然後你意識到這種方法有問題。
我現在在做的是評論。很多。
template.css -
/* ////// Headers ////// */
#header {
width: 1004px;
height: 243px; /* 263H-20MARG=243H */
padding: 20px 0px 0px 0px;
background-color: #000000;
background-image:url('../images/redset/top1-bk.png');
background-repeat:no-repeat;
background-position:right top;
clear: both;
}
/* logo */
#logo {
background-image:url('../images/redset/wh-logo.png');
background-repeat:no-repeat;
width:327px;
height: 263px;
float: left;
margin: -20px 0px 0px 0px;
}
#logo a {
width:327px;
height:263px;
}
/* Top menu & Banner */
#menuybanner {
text-align: center;
/* margin-right: 65px; optional*/
}
#bannerz {
height: 152px;
width: 653px;
text-align: left;
margin-right: 24px;
/* optional: width: 100%;
margin: 0px */
}
#bigmenu {
text-align: left;
margin: 18px 0px 14px 74px;
}
#bigmenu img {
margin: 0px 22px 0px 0px;
}
本來這將是在三個不同的CSS：佈局，圖形和文本。現在我知道每個人都做了什麼。順便說一句，我知道它提高了檔案的重量，但我寧願不做一些混合效果，導致每個人後來到我後面，並閱讀CSS應該能夠理解我做了什麼和CSS像這樣：
a, .b, .c, .d, #f, #2 { background-color: black; }
真的很難揭曉。當然，如果你需要這樣做，繼續，但我的意思是，有時他們只是爲了更加神祕......而不是像Moodle一樣...... hahaha。
希望有幫助。
看到你。
使用這種方式，意味着我們只將頁面鏈接到這個索引樣式表？或者什麼方式？，謝謝 – user287745 2010-12-15 05:12:56