質問: 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; } } ```
回答: CSSの解釈速度が問題となるようなことは、(数万個スタイルがあるなら別かもしれませんが)実用的な範囲ではあまりありません(むしろ、通信時間のコストのほうが大きいと思います)。 なお、IE 9にはセレクタが4095個までしか認識されないというバグがあります。逆に、そこに達さないような数であればほぼ気にしなくていいと思います。