什麼是更快/更高效的CSS樣式

我一直很好奇哪種方法的CSS樣式更快（渲染明智），然後從簡單的最佳實踐的角度來看哪種方法更有意義（我會說是非常主觀的？）。什麼是更快/更高效的CSS樣式

我可以創建基礎類：

.rounded-corners-5 { 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
      border-radius: 5px; 
}

我能做的將樣式應用於多個ID /類的另一種方法：

#box1, #header, #container, .titles { 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
      border-radius: 5px; 
}

來源

2010-06-08 Anthony

我認爲這將取決於實現（瀏覽器），我也認爲這種差異會很小。 – 2010-06-08 18:19:48

我很感興趣哪一種被認爲是更好的編碼風格。第一個似乎乍看起來更好，但是，因爲它將把圓角的規格放入html而不是CSS，所以存在關注的分離。 – tster 2010-06-08 18:21:05

我同意tster：第一個意思是把一個可視化命令放入HTML中（一定要小心名稱描述他們的外觀，而不是他們的目的）。如果它確實有一個合乎邏輯的目的（例如.section），那麼它可能更清潔。否則，我會使用第二個版本。

你真正遭受的是CSS中缺乏抽象，這意味着你傾向於受到重複和/或奇怪的分組以避免重複。你可能想看看this article about Sass。總的想法是，你寫一個Sass文檔（這不是很CSS但相似），然後編譯成一個css文檔，然後部署。

來源

2010-06-08 18:48:13

我問這個問題，沒有像SASS這樣的預處理器的知識。無知怎麼能創造這麼多挫折是驚人的:)。 – Anthony 2012-11-19 01:20:38

我總是用第二種方法，它對我來說似乎更合乎邏輯。我實際上並不知道它是否更快呈現，但它的整潔者在文件中，它將所有類似歸因的ID /類保存在一起。

來源

2010-06-08 18:21:38

如果最終沒有在一個元素上結束多個id和類，那麼第一種方法可以更快地工作，因爲這樣您可以更輕鬆地記住編輯HTML或服務器腳本時類/ id的功能。不過，我不知道哪一個渲染速度更快，而且這對於很多事情來說可能是主觀的，比如瀏覽器，計算機的年齡等等，因爲我不知道關於渲染算法內部的任何內容。各種渲染引擎（不是我可以知道的其中2個我們都知道而且沒有改變任務的憎恨......）。

來源

2010-06-08 18:27:12 mmirate

我不知道哪一個會變得更快。但從維護的角度來看，我會討厭使用第二個選項，因爲這意味着#header元素可能有在CSS中的許多不同位置定義的規則。每次我想改變時，我都不想狩獵它。

來源

2010-06-08 18:28:58 jessegavin