CSSスタイルを設定するにはどうすればよいですか？

Question

例複数の要素を浮動させる必要があります。

オプション1 - チェーン要素

#elm1, #elm2, #elm3, #elm4 {float:left} 

オプション2 - 要素

.float {float:left} 

オプション3と同様のクラスを追加します - 私は1を好む個別

#elm1{float:left} 
#elm2{float:left} 
#elm3{float:left} 
#elm4{float:left} 

クラスにスタイルを追加します。しかし、私はどれくらいのスピードインパクトがあるのか​​分かりませんが、他の選択肢はありますか？このためのコンベンションは何ですか？

Answer 1

ほとんどのCSSミニマイザーと「クリーナー」が最初のオプションを実行します。私の意見では、スタイルのためだけにたくさんの要素を追加する新しいクラスを作成するよりもはるかに優れており、最後のオプションより100万倍も優れています。

すでにIDまたはクラスがある場合は、スタイルを適用できます。したがって、オプション1をオプション2と比較すると、オプション1を選択する方がよいでしょう。あなたのコードを戻って、IDを持つ要素にクラスを追加する必要はなく、スタイルシートの同じ要素のIDとクラスの間でスタイルをやりかえす必要はありません。

Answer 2

速度に関しては、3つのオプションの間に大きな違いはないと私は考えています。私はそれが保守性の問題の多くだと思う。オプション1は、オプションを維持するのが最も簡単になるように思えるので、おそらくそれは私が行おうとしているものです。

Answer 3

http://css-tricks.com/efficiently-rendering-css/ IDが最も効率的ですが、IMHOはクラスがよりクリーンで、あなたが表現しようとしているものをより正確に表していると思います。 http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

@ Googleの記事から

「ユニバーサルキーセレクタを避けてください。 要素が先祖から継承することを許可する、または複数の要素にスタイルを適用するためにクラスを使用します。」

したがって、ベストプラクティスではクラスを使用すると言われています。そのきれいで読みやすいIMHO。

Answer 4

特定のトレードオフがあります。一般的に、IDベースのものは、特にページが重くなるにつれて高速になると考えられています。一方、http://net.tutsplus.com/tutorials/html-css-techniques/object-oriented-css-what-how-and-why/などの記事の著者は、共通のルールにクラスを使用することは理にかなっており、使用する必要があると考えています。速度の差はしばしばごくわずかであり、慎重に使用されるクラスでは、設計をより簡単に維持および更新できるようになります。

Answer 5

グローバルケースではオプション2（クラス）を使用します。これは、クラスセレクタが行うことです。

スタイリングの具体的な違いを識別するためにIDを使用します。これは、IDセレクタの目的です。

.myclass { 
     float:left; 
     height:10px; 
    } 

    #elem2 { 
    height:69px; 
    color:#ABCDEF; 
    } 

Answer 6

CSSの全目的は、プレゼンテーションからHTMLを解放することです。したがって意味論的アプローチは常に良いものです。

.float { float:left }を使用している場合は、style="float:left"を使用することもできます。（これはエキスパートですが、プレゼンテーションと情報の分離が良いスタイルクラスが少ないほど重要です）

前述したように、最善の方法は、HTMLコードを意味的に識別して分類してから使用することですDOM関係

#elements { 
    float:left; 
} 
    #elements li { 
     color:#ABCDEF 
    } 
    #elements li.odd { 
     color:#123456 
    }