0

基本上，我想知道以下哪种方法（给出相同的结果）更有效，尽管我给出的示例的大小可以忽略不计，但我想假设这些技术适用于整个站点回答。

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

对此有任何想法都会很棒！干杯

4

1 回答 1

4

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-31T09:46:20.443 回答