【CSS】記述量と表示速度を意識したCSSの書き方

こんにちは、ウェブラボクリエイターズメモです。
CSSを記述する時、意識せずに書いてしまうとどんどん記述量が増えていきますよね。
記述が多く複雑になるほど、メンテナンス時の手間が増え、ページの読み込み速度も落ちかねません。

そこで、CSSを記述する時に初心者が意識すべき点をまとめました。
初心者の方は是非ご覧ください。

基本的なCSS記述量の減らし方

まず最初に抑えておくべき基本のポイントをご紹介します。

1.記述内容が一部重複している場合

改善例
上記の書き方だと「h2.recruit」に対してfont-sizeとfont-weightが重複して記述されているので、重複部分を削除します。

変更部分のみを記述することで、記述量が減るだけでなく
共通部分（上記だとfont-sizeなど）の修正時も複数個所の変更をしなくて済むため、メンテナンスが楽になります。
 

2.別々のセレクタで全く同じ記述をしている場合

改善例
上記のように同じプロパティを別々に指定している場合、
セレクタを「,」で並列させ、一つにまとめます。

こうすることで、1と同じく記述量を減らし、メンテナンスを楽に行う事が出来ます。
 

3.頻繁に使用するスタイルの場合

改善例
2の応用です。頻出するスタイルはそれぞれにclassを振って並列にするのではなく、
HTMLを編集し、全てtit_commonという共通のクラスを振り直します。

共通のclassを振ることで、.tit_commonというクラスをつけるだけで同じスタイルが適用されるようになります。
そのため新たに追加する時にCSSを編集する必要が無く、効率的に組むことができます。
 

4.ショートハンドの利用

改善例
CSSのプロパティには、「ショートハンド」という一行でまとめて指定できる書き方があります。
上記のように別々にしているものにショートハンドを利用すると、下記のようになります。

一つだけだと些細な違いでも、重なると大きな差になります。
別々に書かなければいけない理由がないのであれば、ショートハンドを活用していきましょう。

このような基本の積み重ねで、今後のメンテナンスやページの読み込み速度が変わっていきます。
 

表示速度を速めるセレクタの書き方

CSSセレクタの照合は、右から左へと行われます。
意外と知らなかった！という方も多くいらっしゃるのではないでしょうか。

例えば、

.wrapper .main .block_a

というセレクタの書き方をしている場合、
 

1. .block_aを探す
2. その親要素が.mainのものだけに絞る
3. その親要素が.wrapperのものだけに絞る
4. スタイルが適用される

 
という順番に読み込まれています。
そのため、セレクタを書けば書くほど無駄な工程が増え、読み込みが遅くなっていきます。
シンプルかつ必要最低限のセレクタを記述するようにしましょう。
 
改善例

と指定している場合、

上記のように必要なものだけを記述します。
理由のない親セレクタや子セレクタ（ul > liなど直下の要素を対象とするもの）の記述が多く重なっていくと、表示速度が落ちます。
一つ変更したところで微細な変化しかありませんが、積もり積もると大きな差になっていきます。
あえて書く理由がない場合は必要最低限に絞っていきましょう。
 
今まで意識して組んだことなかった！という方は、是非意識してみてください。
以上、クリエイターブログでした。