CSS組織結構

Question

我一直在尋找組織CSS代碼的最佳方式，尤其是在大型網站上。我對寫作風格不感興趣，更關注人們如何構建和管理他們的代碼。

我一直在關注這個結構，我覺得自己的作品相當不錯的可維護性，但我希望得到您對此的意見，並聽取其他方法：

/*======================================= 
1. =reset 
=======================================*/ 
/** 
Anything but * reset 
**/ 

/*======================================= 
2. =base 
=======================================*/ 
/** 
Base rules so naked HTML has basic style and displays consistently x-browser 
**/ 

/*======================================= 
3. =base forms 
=======================================*/ 
/** 
Base form framework 
**/ 

/*======================================= 
4. =base site 
=======================================*/ 
/** 
Rules common across the majority of pages 
e.g. header, footer, main columns, navigation, search bar etc. 
**/ 

/*======================================= 
5. =recurring styles 
=======================================*/ 
/** 
Re-useable snippets -- not to include positioning/structure etc. 
e.g. buttons, icons etc. 
**/ 

/*======================================= 
6. =recurring modules 
=======================================*/ 
/** 
Re-usable modules common to multiple pages/views but not majority 
e.g. a product carousel could be on the homepage as well as the product page and maybe even the checkout page etc. 
**/ 

/*======================================= 
7. =homepage 
=======================================*/ 
/** 
contains rules only applicable to homepage 
**/ 

/*======================================= 
8. =about page 
=======================================*/ 
/** 
contains rules only applicable to about page 
**/ 

/*======================================= 
9. =contact page 
=======================================*/ 
/** 
contains rules only applicable to contact page 
**/ 

...and so on 

任何想法，將不勝感激。

豐富

Answer 1

您指定好看的分歧 - 我建議保持每個部分在它自己的文件reset.css base.css forms.css - 使用http://developer.yahoo.com/yui/compressor/部署時，你可以很容易地合併文件。有助於在開發時保持css的小一點。

Answer 2

我使用SASS並組織所有使用文件（其中一個文件可能包含在另一個文件中）。這是有道理的，因爲我總是知道在哪裏尋找特定的東西，並且人們不會因爲瀏覽長的單個css文件而感到困惑。因此它規定其他人不留下「破窗戶」。

Answer 3

我面臨同樣的問題。我在沒有找到明確答案的情況下搜索網頁。

我結束了我的常見CSS文件類似於您的CSS佈局。然後我把頁面特定的頁面CSS放到他們自己的文件中。爲什麼混雜了common.css，使用頁面特定的CSS。許多人的文章/帖子都擔心，由於打開瀏覽器連接，太多文件會使網站變慢。雖然我認識到這可能是一個問題，但我會在它成爲一個問題時解決它。正如在其他答案中指出的那樣，我總是可以在部署時合併和壓縮css。

Answer 4

我目前的項目是一個大型的SAAS應用程序，有大量的css來處理。我更喜歡將我的文件保存在一個文件中，不僅是爲了加載速度，而且爲了最大限度地減少我編輯時跳轉的次數......另外，無需處理YUI的怪癖。我以前的僱主在YUI上進行了標準化，並且我們廣泛地使用了它......它可以工作，但它可能會很匆忙地變得非常笨重。

結構方面，我將代碼更多地分解出來。我從主要聲明開始，如*/body/html/H1/P等。然後，我爲頭部特定內容做了一個部分。按照一般的正文部分，每個頁面可能有特定內容的子部分。我關閉一個頁腳特定部分。我發現，如果我在構建頁面時按邏輯構造它，至少我有一個想法在哪裏看 - 頂部標題，底部頁腳等。而且，我可以從代碼到本地測試部署到兩個按鍵。

謹防縮小CSS。當然，它的作品。但就我最後一份合同而言，我們正在研究幾乎每天都會發生變化的網站，並且業務分析顯示，我們會​​燃燒更多的公司資源，從而使我們從簡單，清潔的css 。只要它是緩存，並且你沒有加載多個CSS文件，你就很好。在那個工作的情況下，每天有1個特定頁面獲得100萬個獨特用戶，並且該業務組保持良好的壓縮狀態，儘管每小時可以節省5GB，從縮小到5K可以節省成本。帶寬比UI工程師便宜，我猜...

Answer 5

我的基本格式是頂部的塊註釋，並通過標題註釋（與您的類似）潛入主要區域。

/* 
* Title of the site 
* Author 
* Date created 
* Last updated 
* 
* 1-2 line description of what the style sheet is for. 
* 
*/ 


/* Reset (probably imported) 
-------------------------------------------------------------------------------- */ 
... 


/* A Framework (probably imported) 
-------------------------------------------------------------------------------- */ 
I like YUI Grids 


/* Global 
-------------------------------------------------------------------------------- */ 
Styles for basic elements like: body, h1-h6, p, ul, li, ..., and often a wrapper. 


/* Header 
-------------------------------------------------------------------------------- */ 
Any styles specifically for the header block (this is usually short) 


/* Body 
-------------------------------------------------------------------------------- */ 
Basic layout for the main body block 


/* Footer 
-------------------------------------------------------------------------------- */ 
Similar to header 


/* Utility Classes 
-------------------------------------------------------------------------------- */ 
Things like 
.align-center { text-align: center; }; 
.hide { display: none !important; } 
... 


/* Specific Pages 
-------------------------------------------------------------------------------- */ 
Those are my usual subsections (separated by 2 line breaks). Beyond that, short 
rules that only apply to a certain page or subset of pages will get a section like 
this. 

再提一些建議：

特定小節的縮進後裔*

div#left-col { ... } 

    * html #left-col { ... } 

    #left-col p { ... } 

    #left-col ul { ... } 

     * html #left-col ul { ... } 

     #left-col li { ... } 

*但是keep rules efficient與後代的數量包括在一個選擇。通常情況下，我會寫：

div#left-col li span { font-weight: bold; } 

代替：

​​

請記住，這恰恰是改變了這些規則選擇，但只要它適合你的頁面和可維護，這是確定。

Alphabetize屬性。

body { 
    color: #ccc; 
    font-family: Helvetica, Arial, sans-serif; 
    padding: 2em; 
    -webkit-something: some value; 
} 

摺疊短規則1線（如果它不傷害可維護性）。

div#left { float: left; margin-top: 30px; width: 300px; }