cssを大量に書いたら重くなりますか？

Question

sassやSCSSで、次のようにスタイルの作りおきをしたら、
ページ読み込み速度に影響が出ますか？

※要するにfor文で大量のスタイルが吐き出されるので、
その大量のスタイルをもった静的なcssファイルは、ページ読み込み時に重くならないか懸念しています。

@for $i from 0 through 20 {
    .u-p-r-#{$i * 25}mem {
        padding-right:#{$i * .25em} !important;
    }
    .u-p-l-#{$i * 25}mem {
        padding-left:#{$i * .25em} !important;
    }
    .u-p-t-#{$i * 25}mem {
        padding-top:#{$i * .25em} !important;
    }
    .u-p-b-#{$i * 25}mem {
        padding-bottom:#{$i * .25em} !important;
    }
}
@for $i from 0 through 20 {
    .u-p-r-#{$i * 5} {
        padding-right:#{$i * 5px} !important;
    }
    .u-p-l-#{$i * 5} {
        padding-left:#{$i * 5px} !important;
    }
    .u-p-t-#{$i * 5} {
        padding-top:#{$i * 5px} !important;
    }
    .u-p-b-#{$i * 5} {
        padding-bottom:#{$i * 5px} !important;
    }
}

Answer 1

CSSの解釈速度が問題となるようなことは、（数万個スタイルがあるなら別かもしれませんが）実用的な範囲ではあまりありません（むしろ、通信時間のコストのほうが大きいと思います）。

なお、IE 9にはセレクタが4095個までしか認識されないというバグがあります。逆に、そこに達さないような数であればほぼ気にしなくていいと思います。

Answer 2

実際にBootstrapを始めとするCSSライブラリの多数が同じ発想の化物ライブラリを作って公開しています。

$ curl -Lso /dev/null https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css -w '%{size_download}\n'
121260

Minifiedしてなお120KBとは恐ろしいですね。
今日日のサイトはこれを読み込んだ上に、更にテーマCSSを読み込んでいるわけで、
Chromeを始めとする最新ブラウザは100〜200KB程度なら余裕という話です。

一つの目安になるかと思います。
どの位のファイルサイズになるか確認して見てはどうでしょう？

Comments

[findwkwk]

ありがとうございます！
解決いたしました！

Answer 3

もちろんサーバに取得しに行くファイルの容量が大きくなればなるほどページ読み込みは遅くなりますが、

そこまで気にしなくても問題ないと思います！

実際cssなどのtextファイルがものすごく重くなることはあまりないと思います。

Answer 4

もちろんサーバに取得しに行くファイルの容量が大きくなればなるほどページ読み込みは遅くなりますが、

そこまで気にしなくても問題ないと思います！

実際cssなどのtextファイルがものすごく重くなることはあまりないと思います。