要素のCSSクラスは1つの特定のクラスに対してたくさんありますか？

Question

どのような方法でパフォーマンスが最善であるか知りたいのですが、この単純な一般的な例を考えれば、太字の下線付きと青色のテキストを含む要素が必要です。

私はこの方法を使用することができます。

<p class="bold underlined blue">Happy little clouds</p> 

または

<p class="bold-underlined-blue">Happy little trees</p> 

は最初は複数のクラスを明らかに生じるであろうが、これらのクラスの究極の再利用は、1を作るよりも良いように思わ非常に特殊なクラスですが、もう一方で、より多くのクラスを生成すると、これはパフォーマンスの影響があると推測します。

Answer 1

以前のアプローチ（複数のクラスを使用）は間違いなく優れています。お互いのようなで

.bold { 
    font-weight: bold; 
} 

.underlined { 
    text-decoration: underline; 
} 

.blue { 
    color: blue; 
} 

しかし、あなたはまた、特定の組み合わせのためにそれらのスタイルを設定することができます：上記の例で

.bold.underlined.blue { 
    font-size: 18px; 
} 

、font-sizeだけでなく、あなたは、要素が個別にとスタイルすることができます対応する要素は、本質的に、それ自体で、後者の方法と同じであろうすべての3つのクラスを持っている場合にのみ適用される:)

なし特殊なクラスを使用するだけでより多才なことができますが、より高速です - ドキュメント全体でfont-weight: boldなどのスタイルを複数回再利用する可能性があるため、専用のクラスを使用すると、宣言を書く必要がなくなります。個々のセレクタに書き込む必要があります。

しかし、これらの特殊なクラスでは唯一、あなたが何度も再利用されます、物事のために作成されなければならない - 一度だけ使用されている何かのために特化したクラスを作成することは冗長になります。

希望すると便利です。