我應該在CSS還是重複規則中重寫以前的值？

其中哪一個是最佳實踐方面的「更好的CSS代碼」？我應該在CSS還是重複規則中重寫以前的值？

A - 改寫：

@media only screen and (min-width: 480px) and (max-width: 960px) { 
    h1, h2, .header, .widget, .copyright { 
    position: static; 
    width: 100%; 
    height: auto; 
    /* a lot more styles may be here */ 
    } 
    .copyright {position: relative;} 
}

乙 - 重複：

@media only screen and (min-width: 480px) and (max-width: 960px) { 
    h1, h2, .header, .widget { 
    /* CLASS .copyright is missing here to avoid rewriting */ 
    position: static; 
    width: 100%; 
    height: auto; 
    /* a lot more styles may be here */ 
    } 
    .copyright {position: relative; width: 100%; height: auto; /* a lot more of the SAME styles may be here */} 
}

能否改寫產生一定的負面影響（圖表一）？渲染速度較慢，舊版瀏覽器出現問題..？我不知道爲什麼，但對我來說似乎並不合適 - 儘管這樣做更容易。

來源

2014-04-09 Joudicek Jouda

請注意，示例A中存在一個小的拼寫錯誤，因爲第一個規則與另一個示例更爲具體。除此之外，A顯然是更好的選擇，你需要更少的標記來實現相同的結果。 – Nit

謝謝你的錯字警告。我也拓寬了這個問題。 –

速度可能是一個小問題，但總體關注點將是代碼的可讀性。展望未來，您或其他人想要編輯，更容易對A進行更改，而不是B。

來源

2014-04-09 17:52:06 azochz

我可能會選擇選項A.我說可能是因爲它取決於它做多少意義。

表現明智，兩個選項之間的差異可以忽略不計。重要的部分是它是有道理的。如果您處於100％寬度需要更改爲95％的情況下，您會很高興您選擇了第一個選項。

來源

2014-04-09 17:53:32 MiniRagnarok

奇怪的是，你在指定position爲.copyright，只能立即覆蓋它。也許一個小挑剔，但它是清潔劑來做

h1, h2, .header, .widget, .copyright { 
    width: 100%; 
    height: auto; 
} 
h1, h2, .header, .widget { 
    position: static; 
} 
.copyright { 
    position: relative; 
}

但是，你也可以考慮融通width: 100%; height: auto;部分成一個單獨的類與語義的名稱，如full-width。這樣，您可以避免在全球範圍內污染h1。你可以這樣寫：

.full-width { 
    width: 100%; 
    height: auto; 
} 
h1, h2, .header, .widget { 
    position: static; 
} 
.copyright { 
    position: relative; 
}

然後

<h1 class="full-width">My Header<h1> 
<div class="copyright full-width">(c) 2013 Joudicek</div>

正如其他海報所說，性能是你最擔心的。獲得結構的權利，然後如果你真的想要你可以做一些CSS性能分析，並做任何調整是需要的。

來源

2014-04-09 18:00:36

-1

寫短代碼總是很好的做法，所以我建議你第一個（A）選項超過第二個（B）。

來源

2014-04-09 18:05:08

我應該在CSS還是重複規則中重寫以前的值？

回答

相關問題