2013-04-26 12 views
10

私は知りたいのですが、CSSファイルに直接書き込むのではなく、HTMLファイルの<img>タグにクラス名を割り当てる方が良いのは本当ですか?私が知っている必要がありクラス名を<img>タグに割り当てるのではなく、CSSファイルに書き込みますか?

<div class="column"> 
    <img class="custom-style" alt="" /> 
    <img class="custom-style" alt="" /> 
    <img class="custom-style" alt="" /> 
</div> 

代わりの

.column img{/*styling for image here*/} 

は、Webパフォーマンスの面でこれらの間のいずれかの違いはありますか?

UPDATE:

すみません、supposely質問がある複数の<img>.column div内部タグとすべての画像は、同じスタイルを使用しています。

+3

「それは良い...」のような質問は、特に特定の基準が与えられていない場合(「ウェブパフォーマンス」が非常に曖昧な場合)は、一般に非建設的です。さらに、2つの選択肢には異なる使用範囲があるため、一般的な質問として、「車で飛行する方がいいですか? –

答えて

13

簡単な答えは、スタイルを設定する要素に直接クラスを追加することは、その要素をターゲットとスタイルを設定する最も効率的な方法です。しかし、現実世界のシナリオでは、それはまったく問題ではないということはごくわずかです。スティーブOuders(CSSの最適化の専門家)http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/を引用する

:私は次のような仮説を持って試験に基づく

:ほとんどのWebサイトでは、最適化のCSSセレクタから 可能パフォーマンスの向上が 小さくなり、そしてコストに見合う価値がありません。

コードの保守性は、現実のシナリオではますます重要です。 基本的なトピックはフロントエンドのパフォーマンスなので、

  • 少ないHTTPが
  • はCDN
  • がトップ
  • でExpiresヘッダ
  • Gzipでコンポーネント
  • 入れスタイルシートを追加使用を要求してください:スピーディーページのレンダリングのための本当のパフォーマンスブースターは中に発見されました
  • スクリプトを最下部に置く
  • CSS表現を避ける
  • JSを作成するそして、CSS外部
  • DNSルックアップを削減
  • 縮小化JS
  • 避けては
  • をリダイレクトし、重複するスクリプトを削除
  • 設定してETag
  • AJAXのキャッシュ可能

出典ください:だからhttp://stevesouders.com/docs/web20expo-20090402.ppt

をちょうど確認するために、答えははい、eですXAMPLE以下確かに高速ですが、大きな絵のことに注意してください。

<div class="column"> 
    <img class="custom-style" alt="appropriate alt text" /> 
</div> 
+0

偉大な答えは、単にリストに "1つのjpgを削除"を追加;)http://fourkitchens.com/blog/2013/04/24/one-less-jpg –

+0

ありがとう!これは、フロントエンドの開発者としての私にとっての素晴らしい解答です。 .column divの下に同じスタイリングが適用された複数の画像がある場合はどうでしょうか? –

1

クラス名の割り当てとCSSスタイルの適用は、2種類あります。

あなたが<img class="someclass">、および

.someclass { 
    [cssrule] 
} 

を意味している場合、そのクラスに、またはその依存が.column img

0

にCSSを適用する間には、実際のパフォーマンスの違いはありません。 .columnに2つ以上の画像がある場合、CSSを適用する必要がある画像がいくつか必要です。直接画像にクラスを直接追加する方が良いです。.column img{/*styling for image here*/}

パフォーマンス面では、だからCSSは、可能な子供の画像を探しません。

2

指定したスタイルがクラス名にのみ適用されるため、クラス名を指定すると多彩です。 を正確に知っていて、同じようにスタイルを設定したい場合は、そのセレクタを使用できない理由はありません。

最近のパフォーマンスの差はごくわずかです。

0

私はあなたがあなたのサイト上で異なる構造で同じスタイルを使用するときにimgタグ上のクラスの方が良いと思います。あなたはCSSコードの行を少なく書いて、HTMLをより読みやすくする必要があります。