1 つの HTML 要素に多くのクラスを使用することは良い習慣ですか? 例えば:
<div class="nav nav-centered nav-reversed navbar navigation-block"></div>
1 つの要素に 2 つまたは 3 つのクラスが悪いという意味ではありませんが、4 つ、5 つ、または 6 つのクラスについてはどうでしょうか。
はい。
要素は異なるグループの一部になることができ、特定の要素を複数のグループの一部にすることができるため、これは良い方法です。要素は、HTML5 では無制限の数のクラスを保持できますが、HTML4 では特定の長さによって制限されます。
次の例は、複数のクラスの使用を示しています。
最初のクラスはテキストをcolor
redにします。
2 番目のクラスはbackground-color
青になります。
複数のクラスを持つDOM 要素がどのように動作するかを確認してください。両方のCSS ステートメントを同時に使用します。
結果:異なるクラスの複数の CSS ステートメントが積み重なります。
CSSの詳細については、こちらをご覧ください。
.class1 {
color:red;
}
.class2 {
background-color:blue;
}
<div class="class1">text 1</div>
<div class="class2">text 2</div>
<div class="class1 class2">text 3</div>
それらが必要な場合は、良い習慣です。また、将来のコーダーがあなたが何をしているかを理解できるように、それらが理にかなっていることも良い習慣です。
しかし、一般的に、オブジェクトに 10 個のクラス名を付けるのは良い習慣ではありません。なぜなら、それらを使用する目的が何であれ、はるかに少ないクラスで同じことを達成できる可能性が高いからです。たぶん1か2くらいです。
そのステートメントを修飾するために、javascript プラグインとスクリプトは、実行しようとしている処理を実行するために、はるかに多くのクラス名を追加する場合があります。たとえば、Modernizr は 5 ~ 25 個のクラスを body タグに追加しますが、これには十分な理由があります。jQuery UI は、そのライブラリ内のウィジェットの 1 つを使用すると、多くのクラス名を追加します。