CSSのclass名がハイフン始まりの場合にIEでclassとして認識されない

Question

表題の通りなのですが、CSSのclass名で、「class="--first"」といったハイフンから始まる名前にした場合、IEではclass名として認識されず、スタイルが適用されないという現象が起こりました。class名として認識されていないというのは、デベロッパーツールで確認できました。

ChromeやFirefoxをはじめとしたモダンブラウザでは問題なく表示され、Edgeの場合はVirtualBoxの仮想環境においてはIEと同じくclass名として認識されない現象が起こりました。

最初は原因がわからなかったのですが、下記のように変更したところ解消されたので現状、問題は解決しています、、

// class名として認識されない
.--first {
  margin: 15px auto;
}

// class名として認識される
.__first {
  margin: 15px auto;
}

class名において、数字が先頭に来るものは使えないなどは知っていたのですが、このようなケースは知りませんでした。

そもそもハイフン始まりは命名規則として使えないものなのか、また、たまたま解決しただけで他に原因があるのか、あるいはIEのブラウザの仕様なのか、とよくわからずモヤモヤしております。

いろいろ調べたのですが、それに近い情報が見つからなかったので、もし詳しくご存知の方がいれば教えていただけますと幸いです。

宜しくお願いいたします。

Answer 1

think49さんのまとめたこの記事が詳しいです。（仕様へのリンクもあります）

【[HTML, CSS, JavaScript] id名/class名に使用できる文字の種類 · GitHub】
https://gist.github.com/think49/d8fbcf7f1c743e21bc79bb7d16178cad

まとめると次のようになります。

1. 文字[a-zA-Z0-9]およびISO 10646のU+0080以上の文字、さらにハイフン（-）およびアンダースコア（_）のみを含むことができる
   

2. 数字([0-9])、2つのハイフン(--)、ハイフンの直後の数字(-[0-9])で開始できない
   

3. バックスラッシュ()で文字をエスケープできる(例: \- は - を表す)
   

4. Unicodeエスケープシーケンスを利用できる(例: \0030 は 0 を表す)
   

Comments

[s_ogawa]

早速のご回答ありがとうございます、記事の内容も拝見いたしました。
ここまで詳しいルールがあるとは知りませんでした、、勉強になりました。

そもそも今回のケースはsassでコーディングしており、
ネスト前提でBEMっぽい書き方をしていたのでこのような形になっていました。
記事にも明記されている通り、今回のような命名は気をつけないといけませんね、、

参考になりました、回答ありがとうございました！