個人的に最近CSSを書く時に脳死になっているので、自分を戒めるためにもまとめます。
この3つの基礎を頭に入れておく
セレクタの詳細度
CSSはその名の通り上から順にスタイルがレンダリングされますが、どのセレクタが優先されスタイルが適用されるかを表したものが詳細度です。
詳細度はよくA=0, B=0, C=0のような形で表現され、優先度はA > B > Cになります。
セレクタの指定方法によって詳細度は変わってきます。詳しく見てみましょう。
| セレクタ | 詳細度 |
|---|---|
| 全称セレクタ（*） | A=0, B=0, C=0 |
| 疑似要素（::before, ::afterなど） | A=0, B=0, C=1 |
| 要素セレクタ（div, p, inputなど） | A=0, B=0, C=1 |
| classセレクタ（.class-name） | A=0, B=1, C=0 |
| 擬似クラス（:first-childなど） | A=0, B=1, C=0 |
| 属性セレクタ（[type='button']など） | A=0, B=1, C=0 |
| idセレクタ（div, p, inputなど） | A=1, B=0, C=0 |
| インラインスタイル | ボス |
| !important | ラスボス |
上から順に詳細度が高くなっています。
例を見てみましょう。
/* 1.詳細度：A=1, B=2, C=0 */
#header .gnav .gnav-item {
color: red;
}
/* 2.詳細度：A=2, B=1, C=0 */
#header #gnav .gnav-item {
color: red;
}
上記の場合、詳細度の高い2番目のスタイルが適用されます。
セレクタは右から左に照合される
セレクタは右から左の順に照合されます。
div p span {
color: red;
}
上記の場合、最初にspan要素を探します。
次にその親要素にp要素があるもの、さらにその親要素にdivがあるものを調べ、スタイルを適用します。
この例の場合、多数ある要素セレクタを調べレンダリングしているので、時間がかかりパフォーマンスがよくありません。
同じスタイルを何度も書かない
同じようなスタイルを複数回書いていると気づいたならば、その記述は共通化することができます。
汎用的に使えるクラスや変数、sassのmixinやextendsを定義するとよいでしょう。
結局どんな書き方がパフォーマンスいいの？
上記を踏まえたポイントをまとめます。
- 1.セレクタを連ねるほど照合とレンダリングに時間がかかるので、セレクタの数は最小限に！
- 2.詳細度は常になるべく低く設定することを心がければ、上書きする際もシンプルに記述できる！
- 3.同じスタイルは共通化する
例を見てみましょう。
/* パフォーマンスの悪いCSS */
#hoge .box .box-inner p span {
padding: 10px;
color: #000;
font-size: 14px;
}
#fuga .box .box-inner p span {
padding: 10px;
color: #000;
font-size: 14px;
}
この場合、spanから順にセレクタを照合していき、一番左のidセレクタに到達するまでレンダリングが開始されません。
しかも同じスタイルなので、この照合の時間はとても無駄になります。
3つのポイントを参考にリファクタリングしてみましょう。
/* パフォーマンスを改善したCSS */
.box-text {
padding: 10px;
color: #000;
font-size: 14px;
}
spanに共通のスタイルを適用するためにclassを付与し、.box-textだけをセレクタに指定しました。
こうすることで.box-textを照合するだけでよくなり、同じスタイルをレンダリングするのに無駄な時間を使うことはなくなりました。
まとめ
CSSのパフォーマンスを改善する方法は他にもありますが、この３つを常に頭に入れて実行すれば、きれいでパフォーマンスの良いCSSを保つことができるはずです。