web-dev-qa-db-ja.com

存在しない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>

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

htmlcssw3c-validationweb-standards
258
totymedli

「CSSクラス」は誤った名称です。 classは、HTML要素に割り当てる属性（またはスクリプトの観点からはプロパティ）です。言い換えると、CSSではなくHTMLでクラスを宣言するので、あなたの場合、「ターゲット」クラスdoesは実際にそれらの特定の要素に存在し、マークアップはそのまま完全に有効です。

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

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

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

1これはまた、 CSS IDセレクターがallに関係なく特定のIDを持つ要素に一致する IDが1回だけ現れるか、または複数回（不適合なHTML文書が作成されます）。

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

489
BoltClock

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

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

64
David

HTML5仕様 によると：

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

また、 バージョン4 ：

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

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

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

48
Vitalii Fedorenko

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

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

40
Curt

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

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

実際、多くの人々はそれが実際に CSSとJavascriptで別々のクラスを使用し続けることをお勧めします であると考えています。

（注、上記の段落は明らかに大きなプロジェクトに適用されるので、自分で作業している場合はこの極端な作業を行う必要はないと感じないでください.2つを完全に分離できることを指摘するために言及しました）

25
Spudley

CSS クラスを使用せずに使用できますが、JavaScript/jQueryコードだけにCSSクラスを追加する場合は、js-YourClassNameというプレフィックスを付けることをお勧めします。これらのクラスを使用して要素のスタイルを設定しないでください。これらのクラスはいつでも削除できることを理解する必要があります。

13
Aamir Afridi

HTMLにクラスを追加すると、クラスが定義されるため、ソリューションは完全に問題ありません。

10
koningdavid

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

10
Rameez

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

$('.target').css('display','none');は.target { } CSS宣言をまったく変更しません。代わりにここで行われたことは、「ターゲット」のclassを持つ要素が次のようになることです。

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

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

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

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

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

css()とaddClass()を比較する この既存のJSPerf に基づいて、addClass()が実際にはるかに高速であることがわかります。

css() vs addClass()

これをどのように実装できますか？

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

.hidden {
    display: none;
}

HTMLは同じままで、この事前定義されたクラスは後で使用するために適切に配置されます。

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

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

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

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

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

8
James Donnelly

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

重要な点は例を挙げてあげられていないと感じたので、私はチップインしたかった。可変長の要素を視覚的に操作する必要がある場合（この場合は表の行を使用している場合）、Javascriptを使用してそれを行うコストが潜在的に非常に高価になる可能性があることを認識することは常に意味があります（たとえば、数千行）。

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

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

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

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

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

6
Ian Clark

HTML要素にクラスを適用しても効果はなく、そのクラスはCSSで定義されていません。これは一般的な習慣であり、Aamir afridiがjs専用のクラスを使用している場合はjs-をプレフィックスとして使用することをお勧めします。

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

5
Altaf Hussain

クラスを使用して要素を照会するだけでも問題はありません。そのようなクラス名にsys-プレフィックスを付けて（たとえば、クラスにsys-targetと名前を付けます）、スタイリングに使用されるクラスと区別します。これは、一部のMicrosoft開発者が過去に使用していた規則です。また、この目的でjs-プレフィックスを使用する習慣が増えていることに気付きました。

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

4
Ashraf Sabry

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

3
dhruvin