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），那么你应该用一个声明做到这一点。

如果上面的代码是错误的，请不要激怒我 - 如果没有测试它就会脱离我的头脑; - ）

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

1 个答案: