既存のCSSクラスを使用できますか？

存在しないCSSクラスを介してjQueryで列全体を表示/非表示にするテーブルがあります。

<table>
   <thead>
      <tr>
         <th></th>
         <th class="target"></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
   </tbody>
</table>

このDOMを使用すると、jQueryを介して1行でこれを行うことができます。 $('.target').css('display','none');

これは完全に機能しますが、定義されていないCSSクラスを使用することは有効ですか？空のクラスを作成する必要がありますか？

<style>.target{}</style>

副作用はありますか、これを行うより良い方法はありますか？

「CSSクラス」は誤称です。classHTML要素に割り当てる属性（またはスクリプトに関するプロパティ）です。つまり、CSSではなくHTMLでクラスを宣言するので、「ターゲット」クラスは実際にはそれらの特定の要素に存在し、マークアップはそのまま完全に有効です。

これは、CSSでクラスを使用する前に、HTMLでクラスを宣言する必要があることを必ずしも意味しません。ruakhのコメントを参照してください。セレクターが有効かどうかは、セレクター構文に完全に依存します。CSSには、解析エラーを処理するための独自のルールセットがありますが、マークアップにはまったく関係ありません。基本的に、これはHTMLとCSSが有効性の面で互いに完全に独立していることを意味します。¹

これを理解すると、.targetスタイルシートでルールを定義しないことによる副作用がないことが明らかになります。²要素にクラスを割り当てると、スタイルシートまたはスクリプト、あるいはその両方で、これらのクラスによってこれらの要素を参照できます。どちらも他に依存していません。代わりに、どちらもマークアップ（より正確には、そのDOM表現）を参照します。この原則は、jQueryワンライナーで行っているように、JavaScriptを使用してスタイルを適用している場合でも適用されます。

クラスセレクターを使用してCSSルールを記述する場合、「このクラスに属する要素にスタイルを適用したい」というだけです。同様に、特定のクラス名で要素を取得するスクリプトを作成すると、「このクラスに属する要素で処理を実行したい」ということになります。かどうかは、そこにある問題のクラスに属する要素は全く別の問題です。

¹ _{これは、CSS IDセレクターが、IDが正確に1回だけ表示されるか、複数回表示されるかに関係なく（指定されたHTML文書が生成されない）、すべての要素を特定のIDと照合する理由でもあります。}

² _{このような空のCSSルールが必要であると私が認識している唯一の状況は、一部のブラウザーがバグの結果として特定の他のルールを適切に適用することを拒否した場合です。空のルールを作成すると、他のルールが何らかの理由で適用されます。このようなバグの例については、この回答を参照してください。ただし、これはCSS側にあるため、マークアップとは関係ありません。}

スタイルを持たないクラスを使用しても悪影響はありません。実際、CSSの有用性の一部は、CSSがマークアップから分離されており、要素/クラス/などのスタイルを設定できる場合とそうでない場合があります。必要に応じて。

それらを「CSSクラス」と考えないでください。それらは、CSSが必要に応じて使用する「クラス」と考えることができます。

HTML5仕様によると：

クラス属性には、要素が属するさまざまなクラスを表すスペースで区切られたトークンのセットである値が必要です。...作成者がクラス属性で使用できるトークンには追加の制限はありませんが、作成者は、コンテンツの望ましい表現を説明する値ではなく、コンテンツの性質を説明する値を使用することをお勧めします。

また、バージョン4では：

HTMLでは、class属性にいくつかの役割があります。

• スタイルシートセレクターとして（作成者がスタイル情報を一連の要素に割り当てたい場合）。
• ユーザーエージェントによる汎用処理用。

ユースケースは2番目のシナリオに該当するため、クラス属性を使用する正当な例になります。

スタイルのないクラスを使用できます。これは完全に有効なHTMLです。

CSSファイルで参照されるクラスはクラスの定義ではなく、スタイル設定のセレクタールールとして使用されます。

JavaScriptでクラス名を使用すると、そのクラスを見つけるためにCSSを調べません。HTMLコードを直接調べます。

必要なのは、クラス名がHTMLに含まれていることだけです。CSS内にある必要はありません。

実際、多くの人々は、CSSとJavaScriptで別々のクラスを使用することをお勧めします。これにより、デザイナーとコーダーがお互いのクラスを使用することなく、お互いに干渉することなく独立して作業できるようになります。

（注、上記の段落は明らかに大規模なプロジェクトに適しているので、自分で作業している場合はこの極端に行く必要があるとは感じないでください。2つを完全に分離できることを説明するために、 ）

CSSクラスを使用しなくても使用できますが、JavaScript / jQueryコードのためだけにCSSクラスを追加する場合は、それを前に付けてjs-YourClassName、フロントエンド開発者がこれらのクラスを使用して要素のスタイルを設定しないようにすることをお勧めします。これらのクラスはいつでも削除できることを理解する必要があります。

HTMLにクラスを追加した瞬間にクラスが定義されるため、ソリューションは完全に良好です

スタイルシートでCSSクラスを定義する必要はありません。正常に動作するはずです。ただし、追加しても害はありません。

ここで誰も完全に言及していないことの1つは、JavaScript（この場合はjQueryによって支援される）はドキュメントのカスケードスタイルシートを直接変更できないことです。jQueryのcss()メソッドは、一致する要素のstyleプロパティのセットを変更するだけです。この点では、CSSとJavaScriptはまったく関係ありません。

$('.target').css('display','none');.target { }CSS宣言はまったく変更されません。ここで何が起こったかというと、class「ターゲット」の要素は次のようになります。

<element class="target" style="display:none;"></element>

CSSスタイルルールを事前定義していないために発生する副作用はありますか？まったくありません。

これを行うより良い方法はありますか？パフォーマンスに関しては、そうです！

パフォーマンスを改善するにはどうすればよいですか？

style各要素のを直接変更するのではなく、代わりに（別のjQueryメソッド）を使用して、新しいクラスを事前定義し、それを一致する要素に追加できますaddClass()。

基づいて、この既存のJSPerf比較しcss()てaddClass()、我々はそれを見ることができるaddClass()非常に速く、実際にあります：

これを自分で実装するにはどうすればよいですか？

まず、新しいCSS宣言を追加できます。

.hidden {
    display: none;
}

HTMLは同じままです。この事前定義されたクラスは、後で使用するために用意されています。

JavaScriptを変更して、addClass()代わりに使用できるようになりました。

$('.target').addClass('hidden');

このコードを実行するstyleと、一致した各「ターゲット」要素のプロパティを直接変更するのではなく、この新しいクラスが追加されます。

<element class="target hidden"></element>

新しい「非表示」クラスでは、この要素はCSSで宣言されたスタイルを継承し、要素は表示されないように設定されます。

他の多くの人が言及したように、はい、CSSが割り当てられていないクラスを使用することは完全に有効であり、それらを「CSSクラス」と考えるのではなく、クラスとIDのセマンティクスをそれぞれグループと個々の要素であると認識するだけです。

この例では重要なポイントが提起されていないと感じたので、チップを入れたかったのです。可変長の要素を視覚的に操作する必要がある場合（この場合はテーブルの行を使用します）、Javascriptを使用して実行するためのコストが非常に高くなる可能性があることを認識することは常に意味があります（たとえば、数千行）。

この状況で、列2は常に非表示になる可能性があることを知っているとしましょう（これはテーブルの意識的な機能です）、このユースケースを処理するCSSスタイルを設計することは理にかなっています。

table.target-hidden .target { display: none; }

次に、JSを使用してDOMをトラバースしてN要素を見つけるのではなく、1つのクラス（テーブル）を切り替えるだけです。

$("table").addClass("target-hidden")

テーブルにIDを割り当てることで、これはさらに速くなり:nth-child、マークアップをさらに削減するセレクターを使用して列を参照することさえできますが、効率についてはコメントできません。これを行うもう1つの理由は、インラインスタイリングが嫌いです。

HTML要素にクラスを適用し、そのクラスがCSSで定義されていない場合は効果がありません。これは一般的な方法であり、js専用のクラスを使用している場合にAamir afridiが言ったように、それらにjs-をプレフィックスとして付けることは良い方法です。

calssesだけでなく、html要素のid属性にも有効です。

クラスを使用して要素を照会するだけでも問題はありません。私は、これらのクラス名にsys-接頭辞を付けて（たとえば、クラスに名前を付けますsys-target）、スタイル設定に使用されるクラスと区別しました。これは、過去に一部のマイクロソフト開発者が使用していた規則です。js-この目的で接頭辞を使用する習慣が増えていることにも気付きました。

スタイリング以外の目的でクラスを使用することに慣れていない場合は、属性を使用して同じ目的を達成できるRole.js jQueryプラグインを使用することをお勧めしroleます。そのため、を使用してマークアップ<td role="target">を記述し、それを使用してクエリを実行できます$("@target")。プロジェクトページには、適切な説明と例があります。このプラグインを大規模なプロジェクトに使用しているのは、クラスをスタイリング目的でのみ保持することが本当に好きだからです。

jQuery検証エンジンを参照してください。そこにも、存在しないクラスを使用して、HTML属性に検証ルールを追加します。したがって、実際にはスタイルシートで宣言されていないクラスを使用しても問題はありません。