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>

ご覧のとおり、2 番目の例は扱いにくくなり始めますが、最初の例はより簡潔になり、状況が厳しくなると読みやすくなります。

そうは言っても、スタイルがサイト全体ですべて同じになる場合 (例: 赤、18 ピクセルのベルダナ)、単一の宣言でこれを行う必要があります。

上記のコードにバグがあっても、私を怒らせないでください-テストせずに頭のてっぺんから外れています;-)

于 2013-05-31T09:46:20.443 に答える