CSS通用样式VS特定样式——为了效率

Question

基本上我想知道以下哪种方法(给出相同的结果)更有效，尽管它与我给出的示例的大小可以忽略不计，但我想假设整个网站的技术答案。

示例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>

对此有什么想法就太好了!欢呼声

Answer 1

在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)，那么你应该用一个单独的声明来做。

如果我上面的代码有bug，请不要激怒我——这是我没有测试就想到的;-)