2014年のCSSの書き方について考える
最近はwordpressにばかり翻弄されてあまりCSSについて調べたりする時間が前より減っていたのですが、最近サイト高速化などに専念してたら久々にCSSにも触れることになったので。。
主にサイト高速化、軽量化の視点からCSSの書き方についてまとめてみました。
@importはサイト高速化には不利
wordpressサイトだとstyle.cssに書き込むことの多い@import。
これ、サイト高速化にはよろしくないようです。。
PageSpeed Insightsだと修正対象扱いになります。CSSは1枚に集約した方がページ速度には有利だそうですが1枚のファイル容量が膨大になってもねえ。。。
しかしGoogle的には CSSの枚数>ファイル容量 という基準なのがよく分かりました。
class、id名のみでなるべくシンプルに指定する
CSSって右から左に読み込むらしいんですよ。
たとえばsection > h2 という指定だとまずcss内全てのh2を読みにいく→h2を内包する親プロパティのsectionを全て巡回、という二段構えなので、その分読み込みに時間がかかるらしい。。
それをhtmlをこう書けば
<h2 class="midashi"></h2>
cssでは.midashiのみの指定で済むので読み込み時間も軽減になるという。。
ちなみに同様の理由で div.midashi 的な書き方も読み込み時間がかかるようですよ。シンプルに.midashiとか#midashiのみで完結できると読み込み速度には良いらしいですね。
うーん、個人的にはクラス名とかid名を書かずに子孫セレクタのみのコーディングが好きなのでこれは結構衝撃でした、、子孫セレクタだとhtml上はすっきりしてもcss上は重くなるなんて！
CSS3は子孫セレクタの宝庫なのにそれがアダになるなんてねえ。。（今回「●●ねえ」の語尾が多いな。それだけ動揺？しとりますw）
ベンダープレフィクスはいらない？
この見出しは語弊がありますが、各ブラウザのバージョンアップや、XP終了などの喜ばしい（笑）状況につきベンダープレフィクスが不要なプロパティが増えてきました。
以下のサイトに現状と解説がまとめられています。
こちらを見ていると、FireFox3.6とIE9を切れば大体のプロパティはベンダープレフィクスなしでもいけそうですが（笑）、やはりまだ根強いので個人的には以下のように書こうかと考えています。
■border-radius
.hoge{
border-radius:4px;
behavior: url(/wordpress/wp-content/themes/hoge/js/PIE.htc);
}
■ box-shadow
.hoge{
-webkit-box-shadow : 10px 10px 5px #000000 ;
box-shadow : 10px 10px 5px #000000 ;
behavior: url(/wordpress/wp-content/themes/hoge/js/PIE.htc);
}
グラデーションはまだしばらく現状のままが無難かな。。
プロパティによってはベンダープレフィクスを残したままだと逆に表示されないものもあるようなので、早いうちにborder-radiusの指定を修正せねば・・・＾＾；