哪個CSS代碼片段更適合可維護性和性能

下面是片斷1：

#question-title-1 { 
cursor:pointer; 
color:blue; 
padding:10px; 
} 

#question-title-2 { 
cursor:pointer; 
color:red; 
padding:10px; 
}

片段2：

#question-title-1 , #question-title-2 { 
    cursor:pointer; 
    color:blue; 
    padding:10px; 
} 

#question-title-2 { 
    color:red; 
}

至極一個更好，爲什麼？我更喜歡2，因爲它需要更少的代碼行。另一方面，我認爲重新定義顏色屬性將導致在瀏覽器中重繪。

來源

2013-04-17 DownDown

它不會導致重繪。想象一下，如果瀏覽器在解析每一行CSS後繪製屏幕，則需要多長時間才能呈現HTML頁面。 –

我會用3點CSS聲明所以你沒有做任何超越或複製屬性：

#question-title-1, 
#question-title-2 { 
    cursor:pointer; 
    padding:10px; 
} 

#question-title-1 { 
color:blue; 
} 

#question-title-2 { 
color:red; 
}

它更行，但減少線不應該構成CSS的頭。

來源

2013-04-17 09:08:17 Curt

我想說第二個。而不是重複相同的代碼。當有變化反映出來時，你只需要改變一次。

來源

2013-04-17 09:08:28 ferdyh

爲了我好是第二次，也許，但我相信第三個選項是最好的：

#question-title{ 
    cursor:pointer; 
    padding:10px; 
} 

#title-question{ 
    color:red; 
} 

#title-answer{ 
    color:red; 
}

，然後使用方法：

<div class="question-title title-question">

來源

2013-04-17 09:10:29 Aleks

在css選擇器中使用「紅色」和「藍色」這樣的詞並不理想。使用更多的語義詞，例如「.title-alert」，「.title-info」等。 –

真的嗎？ ouh，當然。但是，在定義css類時，這不是'使用哪種語義'的問題，而是'使用'的方法。然後你可以評論'question-title-1'，這對於這個問題來說是沒有意義的 – Aleks

是的 - 我只是總是看到生產代碼中的這種東西，這有點討厭。 –

第二個選項是最好的。這是因爲就CSS而言，DRY方法總是更好，無論是可維護性還是性能。然而，在這個例子中（並且在大多數情況下，當你處理CSS時）性能增益是非常微不足道的，所以你選擇了最容易維護的選項。

來源

2013-04-17 09:14:07 Nix

我不相信第二個選項是最好的。想象一下你有一個需要修改的html/css代碼。好吧，你看看一個標題，看看它使用'question-title-2'，然後你去css，然後你運行在第一個問題標題-2上，然後你看到它是'blue'，那麼你都會感到困惑，尋找第二 - 你看到'紅色'並改變它。並將其與多個'css'的多個'class'定義相乘，很快你就會以非常混亂的css代碼結束，你不知道它是如何組織的，並且你會在第一次教給css時深感頭痛碼。 – Aleks

繼承是CSS中的常見模式。在任何開發工具中（並且很可能是您的IDE），您將獲得有關財產繼承的一個體面的概述，所以我認爲這不是問題。但是，如Curt在他的回答中所建議的那樣，創建若干規則可能更有意義。這取決於用例。如果十個選擇器共享該屬性，但其中一個選擇器不共享，則拆分它們可能沒有意義。 – Nix

哪個CSS代碼片段更適合可維護性和性能

回答

相關問題