0

パフォーマンスとWeb標準の観点からcssセレクターを適切に宣言する方法として混乱しています

私のhtmlマークアップが

<div class="itemList">
    <div class="itemList-img-wrapper">
         <img class="item-img" src="reref.jpg" />
    </div>
     <div class="bottom">
          <div class="info"> <h2>Data is invalid</h2> </div>
     </div>
 </div>

このhtmlを設計するためにcssを宣言するさまざまなものがあります

.item-imgをデザインしたい場合は、2つのバリエーションでデザインできます
。

 .itemList .itemList-img-wrapper .item-img { width:100%; }

またはB：

 .item-img { width:100%; }

バリエーションAは一意であるため好ましいと言われました。したがって、cssファイルの別の場所でクラス.item-imgを使用すると、cssは適用されません。標準とパフォーマンスの観点からどちらが好ましいですか？また、ページに固有のものであることを確認したい場合は、ページの本文にIDタグを追加し、cssをページlistings.phpがあると仮定して宣言する必要があります。

#listings .item-img

また

#listings .itemList .itemList-img-wrapper .item-img
4

2 に答える 2

2

BはAよりもわずかにパフォーマンスが優れていますが、実際には関係ありません。どちらも高速です。他にも数え切れないほどの改善領域があります（ダウンロードされる画像とファイルの減少、他のドメイン名からのDL、JSの重み、CSSと画像、JSのセレクターなど）。CSSセレクターはパフォーマンスの優先順位が最後に近いです（HTMLコードの空白とコメントは最後のimoになります）

私の知る限り、セレクターBを使用する必要があります。しかし、残りのページSがないと、答えるのは困難です。このクラスには他にどのような用途がありますか？他の場所で再利用されますか？どのように？
Listという名前のクラスとitemがあるのに、ul要素ではないのはなぜですか？imgのクラス名に「-img」を追加するのはなぜですか？あなたimg.itemのためにも働くでしょうか、それとも単に.someParent imgですか？等

パフォーマンスとWeb標準の観点からcssセレクターを適切に宣言する方法として混乱しています

どのセレクターを使用すべきかを示すWeb標準はありません;）これは、コード品質、チーム内またはクライアントとの慣習、またはプロジェクトレベルでの個人的な好みに関するものです（これは困難であり、経験とクライアントからの十分なPSDが必要です。定期的に私は2つのPSDでクラスに名前を付けてから、他に20人来ます^^）

于 2013-03-23T20:30:25.853 に答える