編寫可維護CSS的最佳實踐是什麼？

我剛開始探索這個領域，想知道什麼是生產清潔，結構良好和可維護的CSS的最佳實踐。編寫可維護CSS的最佳實踐是什麼？

構建CSS規則似乎有幾種不同的方法。

其中最常遇到的人，我看到一起在一個規則被扔的一切，即邊距，邊框，字體，背景是這樣的：

.my-class { 
    border-top:1px solid #c9d7f1; 
    font-size:1px; 
    font-weight:normal; 
    height:0; 
    position:absolute; 
    top:24px; 
    width:100%; 
}

另一種方法，我注意到性能採用分組，說喜歡的字體大小，字體，重視等進入一個規則文本相關的屬性，背景進入其他，邊框/利潤率進入另一個之一：

.my-class { 
    border-top:1px solid #c9d7f1; 
} 

.my-class { 
    font-size:1px; 
    font-weight:normal; 
} 

.my-class { 
    height:0; 
    top:24px; 
    width:100%; 
    position:absolute; 
}

我想我在尋找一個銀彈這裏我知道我不是不管怎樣，我們都會打賭 - 這個領域的最佳做法是什麼？

來源

2011-01-11 Art

個人而言，我使用第一種方法，但我也縮進兒童選擇器。例如：雖然

.my-class { 
    /* stuff here */ 
} 

    .my-class tr { 
     /* stuff here */ 
    } 

     .my-class tr a { 
      /* stuff here */ 
     }

說不上來的最佳做法，除了把左括號放在同一行的關閉一個，並用分號結束每個屬性，即使是最後一個。

來源

2011-01-11 00:04:52

我用了自己的訂單，對我很方便。

規則按降序排列，規則是規則對佈局的影響。例如：

.element { 
    float:none; 
    position:relative; 
    top:-2px; 
    z-index:100; 
    width:100px; 
    height:100px; 
    margin:10px 0; 
    padding:0; 
    border:1px solid #000; 
    background:#F00; 
    font-size:10px; 
    color:#CCC; 
}

當然，在上面的例子中，我沒有列出所有的css指令。

特定的想法是保持羣體，如順序：

定位
寬度和高度
邊距和補
邊框（和其他人，影響元素的總規模）
背景，對齊（和其他，不影響整個頁面的佈局）
排版

來源

2011-01-11 00:04:54 Flack

1：我用一個非常類似的方法。 – 2011-01-11 00:35:43

我通常會將適用於同一元素的所有屬性組合在一起 - 它會使嘗試找到所有適用的所有內容略微惱人，並且使它更容易避免重複屬性。如果我有三種不同的規則，在不遠的將來我不會驚訝於找到他們所有的設置一些屬性兩三次，因爲有人被趕了出來，只是尋找最近的選擇器，看起來是正確的。

來源

2011-01-11 00:05:59 cHao

是啊，這第二個想法看起來像一場噩夢。 – 2011-01-11 00:12:00

這裏確實沒有正確或錯誤的答案，當然沒有明確的答案。做對你有意義的事情，理想的情況是對別人最易讀。

就我個人而言，我喜歡將相關元素組合在一起，但我也按照它們位於頁面上的部分來組織它們。我將用CSS中的評論來表示這些部分。例如，我的頭部分可以是這樣的：

/* HEADER */ 

#header { 
    float:left; 
    width:100%; 
    height:162px; 
    background:url(images/headerbg.gif); 
    background-repeat:no-repeat; 
} 

#header-left { 
    float:left; 
    margin:0; 
    padding:0; 
    width:350px; 
} 

#header-right { 
    float:right; 
    margin:0; 
    padding:0; 
    width:620px; 
} 

#header a { 
    color:#c4e6f2; 
    text-decoration:none; 
} 

#header a:hover { 
    color:#ffffff; 
}

還有噸的周圍CSS不同的語義的做法，但是這僅僅是如何，我一般組我的規則的一個例子。我通常會盡量減少所需的CSS數量，因此我使用shorthands作爲邊界，邊距，填充等，我儘量不重用CSS選擇器。我通常將所有屬性組合在一起。

來源

2011-01-11 00:17:44

CSS允許您針對特定元素「級聯」多個規則，但通常情況下，您沒有影響相同元素的規則。在一個街區，我將分離出特定類型的指令，但：

div.foo { 
    float: left; 
    padding: 1em; 
    margin: 1em; 

    background-color: #fff; 
    border: solid 1px silver; 

    font-family: ... 
}

我的想法也是最大的可讀性，你想使每個指令儘可能緻密。也就是說，這裏的填充是很容易，保證金爲：

div.foo { 
    padding: 1em; 
    margin-top: 1em; 
    margin-bottom: 1em; 
    margin-left: 1em; 
    margin-right: 1em; 
}

說了這麼多，一般用CSS問題不會再讓小獨立塊乾淨。你更常見的問題是，你如何在文件和文件的一部分分組規則？例如，您可以使用一個layout.css，theme.css（顏色，字體等）以及影響應用程序特定部分的單個CSS文件，如data-browser.css。然後，您可以從一個主CSS文件導入這些CSS文件，或者根據需要在每個頁面上導入它們。

來源

2011-01-11 00:17:53

對我來說，元素的alphabetize屬性很好。它對程序員的眼睛來說簡單，明顯並且很好:)

例如

#my-id 
{ 
    color: #fff; 
    float: left; 
    font-weight: 
    height: 200px; 
    margin: 0; 
    padding: 0; 
    width: 150px; 
}

生產之前，我們建議使用CSS compressors的some提供的性能提升。

來源

2011-01-11 00:34:07 kajo

我喜歡Stefano Mazzocchi在帖子中的建議，標題爲Why Programmers Suck at CSS Design。除其他外，他解釋瞭如何從一張乾淨的版面開始，是否使用em或px，如何定義字體等。我不會使用所有建議（例如，我會猶豫是否要導入任何CSS或其他任何CSS） - 來自雅虎的文件），但有些想法很不錯。

，還有一些人建議：100 Exceedingly Useful CSS Tips and Tricks

來源

2011-01-11 00:50:21

與大多數「最佳實踐」這裏沒有正確的答案。我認爲其他人的建議和風格總體上不錯。

雖然我喜歡CSS，但我認爲CSS在這方面失敗了。該語言陳舊，可以用很多方法來幫助我們組織大型和複雜的CSS文件。在這個方向上的一個很好的努力是http://LESScss.org。他們通過變量，mixin，嵌套規則甚至操作來擴展CSS，使css可以更加乾爽和易於管理。

它不是/ true/CSS，因爲您必須使用preprocess the LESS to turn it into CSS瀏覽器才能理解，但這是一個快速而輕鬆的步驟，如果您的CSS日益笨重，那麼這對您來說可能是值得的。

所以，如果你發現CSS笨拙，它可能是值得一試。

來源

2011-01-11 00:55:00

如果您使用的類名，其很可能是一個完全不同的外觀再次使用在另一種情況下，使用「命名空間」，以確保這些規則不會「流血外」他們的預期範圍內。上下文是最近父元素的選擇器，在其中您將始終找到與您的un-namespaced選擇器匹配的元素。

例如讓我們想象一下你正在做一些樣式可重複使用的模塊，它的頂級元素總是有類=「MyModule的」。僅用於使用的所有選擇應該再用「.mymodule‘開始 - 因此’.item」應該成爲「.mymodule .item」，爲您MyModule的項目冠軍應該有選擇「.mymodule .item .title僞」等

但是，不要試圖將您的整個元素層次完全複製到CSS中 - 這會導致非常脆弱，難以維護的CSS。例如如果你認爲你會在「.new-products」之外使用「.product-item」，但你會想要在很大程度上保留其外觀，）的選擇器。你總是可以覆蓋其他選擇器（同等或更高特異性）的風格，以適應在外觀上在其他情況下的變化。

實施例：

.black-module { 
    background: #000; 
} 
.product { 
    color: #363; /* products look similar everywhere / } .black-module .product { color: #FCF; / products have lighter text if inside a black module / } .product .title { color: #030; / won't affect article titles / } .black-module .product .title { color: #FCF; / won't affect article titles or product titles in a non-black module / } .product .subtitle { color: #7A7; / looks good on all known module backgrounds, even black */ 
    } 

.article .title { font-weight: bold; /*won't affect product titles */ }

來源

2011-01-11 08:11:43 martyfmelb

編寫可維護CSS的最佳實踐是什麼？

回答

相關問題