CSS通用樣式VS特定樣式 - 效率

基本上我想知道下列哪些方法（給出相同的結果）更有效，儘管它會忽略我給我的例子的大小想要通過一個完整的網站來獲取答案。CSS通用樣式VS特定樣式 - 效率

例1

//generic 
.round { border-radius:5px; -moz-border-radius:5px; } //-o-, -ms-..... 
.blue { color:blue; } 
.red { color:red; } 
//specific 
.title { width:100px; height:20px; background:black; } 
.image { width:50px; height:50px; } 

<div class="title round blue">title</div> 
<div class="image round red">image</div>

例2

//specific 
.title { width:100px; height:20px; background:black; border-radius:5px; -moz-border-radius:5px;color:blue; } 
.image { width:50px; height:50px; border-radius:5px; -moz-border-radius:5px; color:red;} 

<div class="title">title</div> 
<div class="image">image</div>

任何對此的思考將是巨大的！乾杯

來源

2013-05-31 rorypicko

完全取決於方便.. –

效率從不依賴於方便！或者你說效率沒有任何差別，那麼選擇每個項目最方便的方式？ – rorypicko

爲了提高處理代碼的便利性，提高效率（CSS），這對於普通網站來說幾乎沒有什麼影響嗎？是的，我爲我的項目選擇了便利性，因爲它們不像facebook和google那麼大，所以效率幾乎沒有問題 –

CSS方法的渲染沒有顯着差異。考慮的事情是CSS文件需要下載多長時間。很明顯，寫得很好的CSS會比具有太多聲明的冗長CSS下載得更快。但是，如果你想要（擴展你的例子）許多不同風格的標題，那麼更詳細的方法可能會更好，因爲從長遠來看，它最終會變得更「緊密」。

.title{font-size:18px;padding:20px 0;font-family:verdana} 
.blue{color:#00f} 
.red{color:#f00} 
.bgyellow{background-color:#ff0} 

<div class="title red">My Title</div> 
<div class="title blue">My Title</div> 
<div class="title bgyellow red">My Title</div>

最好...

.redtitle{font-size:18px;padding:20px 0;font-family:verdana;color:#f00} 
.bluetitle{font-size:18px;padding:20px 0;font-family:verdana;color:#00f} 
.redbgyellowtitle{font-size:18px;padding:20px 0;font-family:verdana;color:#f00;background-color:#ff0} 

<div class="redtitle">My Title</div> 
<div class="bluetitle">My Title</div> 
<div class="redbgyellowtitle">My Title</div>

正如你所看到的，第二個例子將開始變得不方便了，而第一個將更爲簡潔吃不了苦時閱讀。話雖如此，如果你的風格在整個網站上都是一樣的（例如紅色，18px verdana），那麼你應該用一個聲明來做到這一點。

不熄火我，如果我上面的代碼是越野車 - 這是把我的頭頂部沒有測試;-)

來源

2013-05-31 09:46:20 Doug

CSS通用樣式VS特定樣式 - 效率

回答

相關問題