cssの子孫セレクタはパフォーマンスにどれくらい影響するか？

Question

お世話になります。現在ですが、gulp+sass+nanocssでcssの設計を管理しています。

しかし、cssの子孫セレクタを多用すると、ページの読み込みスピードに悪影響があると聞いたので、
質問させていただきました。

具体的には下記のように設計しています。

main.scss
_reset.scss
_variable.scss
_layout.scss
_common.scss
_parts.scss

上記をimportして１つの
main.css
に結合

BEMを使って命名規則しており、

block-name {
  width: ○○%;
  &__element {
    background: #fff;
    &--modifier {
      color: red;
    }
  }
}

上記のような書き方をしています。

すでに、子孫セレクタが3階層になっているのですが、
このような書き方は避けたほうがいいのでしょうか？

管理する側としては、わかりやすいかなと思っているのです。。。

ご意見などいただけましたら幸いです。

どうぞよろしくお願いいたします。

Answer 1

cssの子孫セレクタを多用すると、ページの読み込みスピードに悪影響がある

そもそも、これは子孫セレクタではありません。CSSにコンパイルすると以下のようになります（少し調整しています）。

.block-name {
  width: 10%;
}
.block-name__element {
  background: #fff;
}
.block-name__element--modifier {
  color: red;
}

そして、Bootstrapのような巨大なCSSを使っても実用上スピードの問題が発生することはないように、CSSの読み込み速度が問題となることは、現実的なスケールではほぼ考えられません。

Comments

[QOOSO_PLAN]

ありがとうございました！理解できました。

Answer 2

ページの読み込みスピードに悪影響･･･

階層の深さより、他の原因がよっぽど影響します。「Webページ 高速化」等で検索してみてください。

Comments

[QOOSO_PLAN]

ありがとうございます！