🐘

cssのセレクタ数(詳細度)が多いと効かなくなる！？

2022/08/02に公開

CSS

HTML

Web

tech

起きた現象

アップしたcssで、修正箇所と関係ない場所のアイコンフォントが表示されなくなった。
cssに記述ミスはない。
コンパイル後のファイルにもアイコンフォントの記述はある。
ブラウザのDevToolsで見ると、当たってない・・・？？？？？

原因

制作環境：stylus
アイコンフォントのスタイルは、汎用クラスをつくり、@extend であちこちで利用。
結果、コンパイルすると、セレクタ数がえっぐいcssが出来上がる！！！

section.aaa-bbb a:not(.ccc-ddd)[target=_blank]:after,
section.eee-fff a:not(.ccc-ddd)[target=_blank]:after .......
/*この後ろいっぱいセレクタ */

で、このボリューミーなcssが原因ぽいが、具体的には何がいけないのか？

文字数
セレクタ数（要素数？上記だと、1行で1セレクタとする感じ）
セレクタ数（詳細度？上記だと、1行で6セレクタとする感じ）

のポイントでDevToolsをいじいじします。
ギリギリ表示できるところから何を変えると表示できる⭕️ / できない❌ のかを調べる。

/* たとえば⭕️ */
section.aaa-bbb a:not(.ccc-ddd)[target=_blank]:after /*この後ろいっぱいセレクタ */
{
  font-family: 'icon';
}

/* 文字数増やす⭕️ */
section.aaaaa-bbbbb a:not(.ccccc-ddddd)[target=_blank]:after /*この後ろいっぱいセレクタ */
{
  font-family: 'icon';
}

/* セレクタ増やす⭕️ */
.test:after, 
section.aaa-bbb a:not(.ccc-ddd)[target=_blank]:after /*この後ろいっぱいセレクタ */
{
  font-family: 'icon';
}

/* セレクタ内の単語数？詳細度？増やす❌ */
section.a .b a:not(.ccc-ddd)[target=_blank]:after /*この後ろいっぱいセレクタ */
{
  font-family: 'icon';
}

詳細度っぽいぞーーー！！！！
※詳細度っていっても、詳細度の数値は関係なく、単語数のこと言ってます。なんて言うのか知らない。これがセレクタ数？

対処

extendの見直し + スタイルの分割

たとえば、以下みたいにextend入子になると、いらない記述が生まれたりします。

.icon {
  font-family: 'icon';
}

.text-normal {
  /*スタイル諸々*/
  a[target="_blank"] {
    @extend .icon;
  }
}

.text-bold {
  @extend .text-normal;
  font-weight: bold;
}

↓コンパイル

.icon,
.text-normal a[target="_blank"],
.text-bold a[target="_blank"] {
  font-family: 'icon';
}

.text-normal,
.text-bold {
  /*スタイル諸々*/
}

.text-bold {
  font-weight: bold;
}

extendに使うスタイルは簡潔にすること
extendの入れ子は原則禁止

とするのがいいかもしれない。
そもそもextendじゃなくてmixinとか違う方法を使う方がベターそう。

おまけ

ついでに数を調べてみた。
雑に置換とかでこねこねして個数を調べたら、8192 (=2の13乗) が閾値のようでした。
(めちゃくちゃマンモスextend地獄スタイルだったってことです・・・こわい・・・)

みなさんお気をつけあれ。

起きた現象

原因

対処

おまけ

Discussion