web-dev-qa-db-ja.com

CSSクラス名にキャメルケースを使用できますか

CSSクラスに名前を付けてimgSuperと呼びたいです。 CSSクラスでキャメルケースを使用できますか?

31
KJai

技術的にはそうですが、CSS構文はほとんど大文字と小文字を区別しませんが、特定の条件下の一部のブラウザーでは、CSSルールをHTMLクラスに一致させるときにブラウザーが大文字と小文字を処理する方法を仕様が指定していないため、クラス名は大文字と小文字を区別して扱われるため、リスクがあります。名前。

仕様セクション4.1. から:

すべてのCSS構文は、ASCII範囲.。内では大文字と小文字を区別しません。

CSSでは、識別子(要素名、クラス、セレクターのIDを含む)には、文字[a-zA-Z0-9]とISO10646文字U + 00A1以降、およびハイフン(-)とアンダースコア( _);数字で始めることも、ハイフンの後に数字を続けることもできません。識別子には、エスケープ文字と任意のISO 10646文字を数値コードとして含めることもできます(次の項目を参照)。たとえば、識別子「B&W?」 「B \&W \?」と書くことができますまたは「B\26W\3F」。

... HTML属性「id」と「class」の値、フォント名、およびURIの大文字と小文字の区別は、この仕様の範囲外です。

大文字と小文字が区別されるブラウザーと条件を学習するのではなく、最善のアプローチが最も互換性があることを理解することをお勧めします。特定のCSSクラスのすべてのコードで同じ大文字と小文字を使用し、2つ以上のCSSクラスを作成しないでください。大文字と小文字のみが異なる名前。

40
Warren Young

承知しました。 ここ は公式ルールです。基本的に、名前を数字で始めるのではなく、文字、数字、ハイフン、アンダースコア、およびエスケープ文字またはエンコードされた文字を使用できます。

ただし、慣例として、キャメルケースの代わりにハイフンが一般的に使用されます。

6
Jacob Mattison

はい、クラス名では大文字と小文字が区別されるため、問題なく機能します。

ただし、一部のブラウザではこれが間違っており、クラス名では大文字と小文字が区別されないことに注意してください。したがって、同じ名前の大文字と小文字の両方のバリエーションを使用することは避けてください。クラスimgSuperimgsuperは、一部のブラウザでは同じものとして扱われる場合があります。

1
Guffa

はい、できます。 cssファイルでクラス「fooBar」を呼び出す場合は、マークアップでclass = "fooBar"を割り当てるときに一貫した大文字を使用するようにしてください。

0
ozona