組織CSS規則的最佳方式是什麼？

Question

什麼策略可以幫助您跟蹤大量的CSS規則？你如何組織你的文件，你的代碼塊和你的規則？

Answer 1

爲一個大文件的CSS規則我將組織它以這種方式

1. 提供第一
2. 提供任何普通/通用規則（例如對任何復位CSS規則{顏色：＃553423;}下一個
3. 除以頁面
4. 的部分剩餘文件把每個規則上一個符合一般規律，然後更具體的規則
5. 按字母順序排列選擇內每個規則

例如：

/***** 
/* ~masthead 
/***** 

#masthead {background-color: #cc00ff; color: #fff; width: 950px; } 
#masthead h1 { background: transparent url(logo.png) no-repeat; text-indent: -9000px; width: 200px; } 

/***** 
/* ~content 
/***** 

#content { background-color: #fedefd; margin:0; width: 357px; } 
#content h1 { font-size: 120%; font-weight: bold; margin: 50px 20px 50px 70px; } 
#content p em { color: magenta; } 

這樣你就可以

1. 容易地搜索段（搜索〜桅頂，你是在部分的頂部）
2. 輕鬆地掃描所有規則的部分在一次，以確定如果事情被覆蓋或不
3. 容易調整R甚至排長隊。字母排序選擇器確保「顏色」不會以相同的規則出現兩次

Answer 2

通常我會嘗試將通用規則放到特定位置。例如，文檔的開始可能有body，div，h1等規則。之後，我將進入具體的課程規則。最後按照id的規則。

我也看到人們通過他們的使用組合在一起。例如，如果你的頁面有一個表;您可以將所有規則分組，以將表格，單元格，數據樣式化在一起。可能在css文件中添加一些註釋以解釋每個部分的用途，以便稍後查找。

Answer 3

我發現基於ID或類選擇是改變不那麼脆弱，更容易維護比我基於位置的人。然後，我們將規則分割成網站（全局）和應用程序規則。在每個文件中，我們按字母順序組織事情，從最不具體到最具體（按照css規範）。我們不會最小化或以其他方式減少我們規則的可讀性，並且將它們評論爲代碼。當我重構一個HTML頁面時，我所做的第一件事是從內容中剝離樣式，並將其移至css文件中。我知道這個可能很明顯。

/艾倫

Answer 4

我用幾種技術：

• 集團通過#ID /類
• 評論主要模塊，使用下劃線，便於搜索（/ * _IDName/*）
• 使用CSS速記有助於減小文件大小，使其更易於管理。

有，我用在網上一些好的文章。我會再試一次。

Answer 5

對於真正的大的部分，這也是不錯的了破片成較小的邏輯塊，每獲得自己的表和鏈接標籤。這樣，當您需要調整導航欄樣式的一小部分以支持新穎的按鈕時，其餘大部分樣式都是沒有更改的表單，因此仍會緩存在用戶計算機上。

Answer 6

基於在網頁上的規則出現我通常會打破主css文件成部分 - 所以會有的網頁標題導航欄（S）一節，另一個，等等。

我也爲打印介質打出一個單獨的文件。

一樣的程序文件，我使用的註釋塊指示哪些規則是在下面的章節。

我不相信有在比單個大文件雖然有幾個小文件顯著的性能優勢。

Answer 7

從顏色和文體規則中分離佈局規則。

Answer 8

我喜歡將css存儲在包含站點靜態內容的Content文件夾中。 然後，我通常嘗試每個「業務上下文」有一個CSS文件。所以如果我有一個網站部分的用戶註冊了貿易展覽會，url可能是「[host]/shows /」，我的css文件將是「[host] /content/styles/shows.css」。 如果事情變得更加複雜，「顯示」變得太大，我可能會創建一個「content/shared /」文件夾和一個「content/shows /」以匹配「shows」的子域名。使用Resharper或「查找&替換」重命名問題變得微不足道。

Answer 9

我4個提示：

進一步組織你的CSS縮進子項比其他人：

#main_side { 
    width: 392px; 
    padding: 0; 
    float: right; } 

    #main_side #featured_articles { 
     background: #fff; } 

    #main_side #frontpageads { 
     background: #fff; 
     margin: 8px 0; } 

使用速記：

margin:5px 0 4px 10px; 

將你的樣式表成具體部分：

全局樣式 - （身體，段落，列表等），標題，頁面結構，標題，文本樣式，導航，表單，註釋，附加

可選：使用壓縮機擠壓你的代碼放到一個較小的文件大小。

Answer 10

我的基本方法是從程序和文體的角度來看待它。

• 避免重複
• 評論大碼
• 如果可能的話使用CSS縮寫性質塊
• 標註類理智，避免事情像class_001/tom_cruise是毫無意義的

令你的CSS這樣的文件：

• 個元素聲明
• 下一個全局類
• 佈局容器和部分。

有用的鏈接：http://www.456bereastreet.com/archive/200610/useful_tips_for_writing_efficient_css/

Answer 11

我特別欣賞this article給出的提示。

Answer 12

將頂部的目錄分成多個部分和小節。按字母順序排列。

Answer 13

• 我做一個默認的文件爲一些默認的規則（適用於大多數的子頁面）
• 每個子頁有它自己的CSS樣式表（如果它需要）
• 我用速記（背景：#FFF url（../ images/header_1.jpg）0 0 repeat-x;）
• 類如果我有多於一個給定類的元素（如果有一個元素 - 使用id）
• 避免重複，如果你可以繼承 - 做到這一點

Answer 14

最有效的CSS使用涉及到重用類的重要性。雖然根據頁面上顯示的位置將班級和ID分組很容易，但當您開始適當地重新使用最終出現在多個區域的班級時，此方法會很快崩潰。

另外，你應該避免命名其外觀後你的CSS類，如h1.blue或tr.55。以這種方式命名CSS類完全違背了使用CSS的目的。請記住，有一天您可能想要將所有藍色的內容更改爲紅色。如果您將類名稱爲.blue和.red，則必須觸摸標記才能完成您的任務。但是，如果您命名類.moduleHeader或類似名稱，則可以在不觸及標記的情況下更改css文件中這些模塊標頭的顏色。

有顯著再使用類精心打造的CSS文件是最好的類按字母順序排列。這種方法總是有組織的，並且對每個在你的項目中工作的人都有意義。

我喜歡按字母順序組織我班一個大塊，然後有另一塊爲我的ID的字母順序排列。

根據場地的大小，它可以把結構單元合併成一個文件，並在另一個css文件「風格」元素（顏色，字體選擇等）是一個好主意。這使得您只需使用結構元素即可擁有完美可用的網站，並且還允許您僅通過觸摸或更換「文體」CSS表格來「重新設計」網站。

在實踐中，我更喜歡有兩個「漂亮」的事情，該結構中的一個較大的CSS表，因爲它很煩人的生產環境兩者之間切換。但是，根據您的團隊的結構，在另一種安排中可能對您更好。

在一個類或id聲明中，我也按字母順序組織我的屬性。我嘗試了其他組織結構，但是沒有經過培訓的似乎只爲其他人工作的是按字母順序排列的。

Answer 15

使用CleverCSS，這是一種小型標記語言，可以省去編寫和組織CSS的麻煩。

Answer 16

我將所有樣式直接應用於樣式表最頂部的標籤。以下是任何一般的CSS類。

之後是主要結構，通常是全球性的。一般來說，我覺得它更容易不斷地繼承人例如選擇：

#container { width: 600px; ... } 
#container #header { .... } 
#container #header h1 { font-size: massive; } 

#container .column [ .. } 
#container #left-column {.. } 
#container #left-column #content { ... } 

這具有提供一種壓痕的好處，你可以很容易看到從CSS中的頁面結構。有時你必須重新命名你的風格規則是頁面結構的變化，但這不是什麼大不了的事。當所有規則都在同一行上時，此風格效果最佳。

當我涉及到樣式表的內容部分時，我稍微改變了一些東西，並立即下降到我的內容div。

#content h2 { ... } 
#content h3 { ... } 
#content ol, 
#content ul, 
#content dl { ... } 

最後，我結束了特定頁面的樣式規則。我發現最有意義的是給男孩一個基於文件名或URI的身份標識，身體是文件當前目錄的一個類。這使得將主CSS中的樣式規則定位到特定頁面或頁面組（如果需要）非常容易。 （顯然你應該考慮包括一個新的樣式表）。

在我的樣式規則聲明中，我遵守所有規則的順序，從顯示屬性，位置，大小，邊距，邊框，填充，背景，顏色，文本屬性，行屬性，字屬性等字體屬性。從概念上講，從外部開始（你可以爭辯說，字體屬於文本屬性之上，只要你是一致的，那就是重要的）。

因爲我必須記住它們（頂部，右側，底部，左側），所以我使用框（e.x. margin和border）的縮寫。我避免使用簡寫背景和字體，因爲它們有點難以記住。

例如：

.rule { 
    display: block; visibility; visible; 
    position: relative; float: left; z-index: 1; top: 3px; left: 10em; 
    width: 100px; height 30px; overflow: hidden; 
    margin: 1px 3px 5px 1px; border:3px dotted #ff0; padding: 5px; 
    background-color: #f0f; background-image: url(/foo/bar); color: #000; 
    text-align: left; text-decoration: none; line-height: 3px; word-spacing: 2px; letter-spacing: 1px; 
    font-family: sans-serif; font-weight: bold; } 

Answer 17

我同意大部分內容已經張貼在這裏。我還發現，將設計和風格分開最終會讓人感到痛苦，而不是幫助，儘管理論上聽起來不錯。我確實喜歡將我的css分成多個文件。我通常對我的網站的主要設計元素有一個主要的css，然後是一些較小的文件，通常是層次結構，因爲我需要更多專門的設計元素。與此相關的一個問題是，很難知道哪個css文件包含我感興趣的樣式元素，但是我使用Aptana來組織我的項目，該項目具有搜索工具。此外，Firebug可以幫助解決這個問題。

我也發現我更喜歡保持我的CSS規則多或少自包含，而不是將它們分離成更小的規則，然後在類定義中將它們連接起來。例如，如果一個div的所有代碼都在一個或兩個規則中，而不是我可能需要搜索的許多規則中，我發現它更易於維護。這可能意味着有一些代碼重複和一個更大的CSS文件，但差異似乎並不大，我更喜歡可維護性。

Answer 18

我在twitter上通過@smashmag偶然發現了這個組織者，比我想像的更有效 - styleneat。com

一旦我完成並準備好交付，或者當我的樣式表變得太亂以至於無法處理時，我就會通過它運行我的CSS。

Answer 19

除了別人提到的所有提示，我傾向於將我的CSS分成多個文件。一個用於主導航的文件，一個用於頁腳，一個用於主排版，一個用於表單，一個用於頁面上每個不同的'對象'。

然後我創建了一個通用樣式表，其中包含所有這些文件。當我準備部署到生產環境時，一個小小的Ruby腳本將這些@import語句擴展爲單個文件，從而減少了所需的HTTP請求數。

根據我的經驗，這比在開發過程中將它全部保存在一個文件中要好得多。

另外，我儘量對評論我的CSS規則。我用多行註釋的規則的一般性描述，和單行註釋來說明單線路：

#some_object { 
    /* 
    * What, where, why, how... 
    */ 
    font-size: 1.2em; /* 12px */ 
} 

最後，我粗澀CSSEdit 組和壓痕相關規則結合起來：

/* @group My section title */ 
    #some_rule { 
     ... 
    } 
/* @end */ 

Answer 20

我終於放下筆來說話，記下我遵循的方法和背後的推理。

http://milanadamovsky.blogspot.com/2010/04/advanced-css-style-order.html

米蘭Adamovsky

Answer 21

嘗試ProCSSor或Styleneat，兩國都是偉大的。

Answer 22

如果您將CSS分割爲單獨的文件並且有很多文件，請注意，Internet Explorer的CSS文件限制爲31個。它不會加載任何超出該限制的樣式。當然，如果你有很多文件，你正在爲你的web服務器創建額外的工作，並增加連接數量，這會減慢你的頁面加載速度（尤其是在資源管理器中），所以它更好在部署網站時將您的CSS組合成單個單一文件，即使您在開發期間將它們分開。