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特定样式 - 效率

回答

相关问题