CSSを軽量化してサイトを高速化するための初心者向け3つのポイント

2018年6月11日

最近は、サイトのリニューアルに追われて
右往左往するミーティング参加者たちを横目に
ほぼ定時で帰る日々を過ごしています。
みなさんこんにちわ。

サイトをある程度運営していく上で、
個別のページを作成したり、装飾を変更したりと、
CSSの記述が増え、複雑になってしまい、
気づけば「表示速度が遅くなっていた」ということがないように、
今回は、初心者でも簡単に始められるいくつかのポイントをまとめて見ました。

超基本!セレクターはクラス名のみで指定する

まずはコレ。
スタイルを指定する際に、table tr td {}
とするのではなく、「.class」で指定する。
ちなみに、この指定する部分を「セレクター」と言います。

HTML

  1. <div class="foo">
  2. <p class="bar">bar</p>
  3. </div>

CSS

  1. div p {} // 非推奨
  2. .baz {} // 推奨

セレクターにクラス名のみで指定するメリット

・クラス名で直接指定することでCSSの記述量が減る。
・簡潔に書かれることで見やすくなる。
・適用までにかかる時間が最短になる。

CSSは適用される箇所を探す際に、セレクターの後ろから順に、
HTMLに書かれた要素を探していきます。
そのため、「p」と指定した場合まず全ての「p」を探し、
そこからさかのぼって指定の要素を探すので、
適用までに余計な時間がかかってしまいます。

セレクターにクラス名のみで指定するデメリット

あえてあげるのであれば、
・スタイルを適用したい要素全てにクラスをつけなければいけない。
・クラス名を考えるのがメンドウ。

CSSに同じ記述を繰り返さないためにモジュール(部品)を作る

ページをひとつ作るたびにCSSも新しく記述していると
同じ内容の記述がCSSファイルに溢れていきます。
何度も使うような記述はモジュールとして作成し、
色々なページで使い回すのがベスト!

CSS

  1. .box-basic {
  2. border: 1px solid #666;
  3. border-radius: 10px;
  4. padding: 10px;
  5. }

例えば上記のようなクラスにスタイルを指定すれば、
サイト全体で、要素にクラスを指定するだけで利用できる
この枠のように。

単一のプロパティを共通化して使い倒す

前項の内容と似ていますが、こちらはもっと細かく
単一の機能を持ったクラスを作成します。

CSS

  1. .back-color { background-color: #ccc; }
  2. .color-red { color: #d22; }
  3. .margin-top10 { margin-top: 10px; }
  4. .padding-10 { padding: 10px; }
  5. .flex { display: flex; }

上記のようなクラスをある程度のバリエーションで作成しておけば、
ページを作成する際にCSSを記述することなく、
HTMLの任意の要素にクラス名を指定するだけで、
思い通りのデザインに近いものが、
簡単に作成できるようになります。

CSSをスタイリッシュに記述する まとめ

セレクターを指定する際は、タグではなく、クラス名で指定することで、
CSSの軽量化になり、見やすくもなる。
サイト全体のデザインに応じて、使い回すことでのきるモジュールを
作成しておくことで、同じ記述を何度も繰り返すことを避けられる。
単一で、使用頻度の高いプロパティも、
あらかじめ作成しておく。

上記の内容は筆者が普段の仕事でも実践している内容です。
スタイルをあらかじめ定義しておくことで、
CSSの軽量化のみならず、作業時間の短縮にもなりいいことずくめなので
是非!実践して見てください!