7

ボタンがたくさんあるとしましょう。各ボタンには異なるアイコンがありますが、すべて同じスプライトシートからのものです。

今私が知りたいのは、ブラウザに関してより効率的であるということです。次のような複数の小さなルールを使用して、各ボタンのスタイルを設定します。

.icon {
    background-image: url('iconsheet.png');
}
.a-button {
    background-position: -x -y;
}
.b-button {
    background-position: -x -y;
}
.c-button { ...

<input class="icon a-button"> blabla ...

またはこれは良いですか：

.a-button {
    background-image: url('iconsheet.png');
    background-position: -x -y;
}
.b-button {
    background-image: url('iconsheet.png');
    background-position: -x -y;
}
.c-button {
    background-image: url('iconsheet.png');
    background-position: -x -y;
}

<input class="a-button"> blabla ...

その点に注意してください

  1. コードは手続き的に作成されているので、私は解析やレンダリングなどの効果にのみ関心があり、コーディングのベストプラクティスには関心がありません。
  2. これは単なるおもちゃの設定です。実際には、さまざまな属性（境界線、フォントなど）の組み合わせが増えています。

はるかに大きなCSSファイルを提供する必要があることを上回る、肥大化したルールを各タグに適用することの利点はありますか？

どうもありがとう！！

[編集]：これまでのすべての回答に感謝します！明確にするために、私はSASS/SCSSを使用しています。私が使用している*.scssファイルは、読みやすさ/保守性の面で問題ありません。

私は特に、タグごとの個別のルールを少なくすることでパフォーマンス上の利点があり、最後にバジリオン行のcssファイルを含めることが許容されるかどうかに関心があります。

4

6 に答える 6

4

これらbuttonの が の役割にも適合する場合.icon、複数のクラス名のソリューションはまったく問題ありません。

CSS をコーディングするときは、パフォーマンスやファイル サイズについて考えるのではなく、意味のあることを考えてください。それが理にかなっているなら、それは効率的でしょう。

于 2012-10-11T13:14:30.347 に答える
1

さまざまな CSS スタイルとそのパフォーマンスについては、こちらを ご覧ください http://screwlewse.com/2010/08/different-css-techniques-and-their-performance/

于 2012-10-11T13:16:48.653 に答える
0

別の要因は、他の誰かがあなたのコードを使用および編集している場合だと思います。おそらく、すべての追加ルールが他のクラスに埋め込まれていることを覚えているでしょうが、他の誰かが要素に使用されているクラスを正確に読み取る方が簡単でしょう.

パフォーマンスの向上が重要であることに疑いの余地はありませんが、今日の世界での数バイトは、浜辺の砂粒を数えようとしているように思えます。コードを削ろうとするよりも、保守可能で読みやすいコードを書くことが重要だと思います。繰り返しになりますが、非常に主観的なものは、コードが誰にどのように使用されているかによって異なります。

于 2012-10-11T13:20:31.413 に答える
0

ここに正しい答えも間違った答えもないと思います...両方の例が機能します。

個人的な経験から、CSS がわずかに小さいことに基づいて、最初の例を選択する可能性が高いと思います。Web で作業しているときは、すべてのバイトがカウントされるため、理想的には、コードをできるだけスリムにしたいことを覚えておいてください。その点で、CSS をリリースする前に縮小することは常に良いことです ( http://www. minifycss.com/ )

あなたが試すことができるもう1つのことは、SASS / SCSSです。SASS コードを使用してスタイルを構築し、標準 CSS にドリルダウンする方法を確認します。( http://sass-lang.com/ )

于 2012-10-11T13:15:17.290 に答える
0

疑わしい場合は、最小のコードを使用してください (可読性も維持するようにしてください)。

ブラウザーは解析する必要が少なくなり、これは良いことです。Aスタイル計算ツリーはより小さくなり、ブラウザが計算されたスタイルをキャッシュする場合、特定のものをどのように取得しcolorたa[href]かaは関係ありa.linkません.link。

私の答えは意図的にあいまいです.CSSは解析戦略を指定していないため、ブラウザはCSSを好きな方法で自由に実装できます. ブラウザーによっては、メモリ使用量が最小であることを誇りにしているものもあれば、ページ プロセッサが最速であることを誇りとしているものもあります。ただし、最小のコードは、読むことが少なくなる人々や、偶然にも「読む」ことで物事を理解するコンピューターの間でフォロワーを獲得します。

于 2012-10-11T13:15:34.707 に答える
0

あなたの最初の答えは間違いなく最も効率的な方法です。どちらの方法でも同じ結果が得られますが、最初の例では、css にコード行を保存しています。これは、2 番目の回答よりもパフォーマンスがわずかに向上していますが、それでも優れています。

また、この観点で考えてみてください。スプライト シートを変更するか、名前を変更する場合、3 つのパスを変更するよりも 1 つのパスを変更する方がはるかに簡単ではないでしょうか?

スクリプトを使用して css ファイルから情報を解析する必要がある場合は、必ず 2 番目の回答を使用してください。

結論: 唯一の違いは無視できる css ファイルのサイズです。

于 2012-10-11T13:15:48.730 に答える