デザイン

デザイン

CSSを効率的に維持しやすくするための8つのコツ。ページ表示速度のアップにも効果的!

788 views

時が経つにつれてCSSファイルが大きくなっていき、スタイルシートを効率的に維持するコーディングが難しくなってきています。そこでCSSをきれいに維持するためのコツをご紹介します。

 

CSSを維持しやすくするための8つのコツ

 

【1】サイトコンテンツごとにテーブルを作る

 

素早く探しているものを見つけるための最も簡単な方法は、サイトコンテンツごとにCSSのテーブルを作り、idとclassを管理することです。

 


上はサイトコンテンツごとのテーブルの例ですが、プロジェクトに適合するように再利用できるでしょう。

 

【2】CSSは標準的な記述法で書く

 

インターネットからCSSコードをダウンロードなどすると、時々悪い書きかたで書かれたCSSに出会うことがあります。コードの読解が難しくなればなるほど、CSSファイルをきれいな状態で維持するのは難しくなります。

 

標準的な記述法は二つあります。最初の書き方は最もよく使われている記述法ですが、「ブロック」形式で書くやり方です。

 

もう一つは「線状」に記述する方法です。

 

「線状」に書く方法はプロパティが3つか4つの場合なら有用ですが、それ以上のプロパティを設置する場合は読みづらくなります。

 

【3】Sassを使う

 

CSSは機能が拡大していっているとは言っても、500行を超えるCSSファイルは一般的ではありません。またこれほど長々としたCSSファイルを維持するのも退屈な作業となるでしょう。

 

そんな時はSass(サス)を使いましょう。SassはCSSの記述を簡単かつ素早くできるようになりますし、またCSSでは使えない機能も使うことができます。そして何よりの利点はSassは言語がとても簡単なことです。

 

下記はSassの変数を使った記述例です。

 

もしまだSassをインストールしていない方はすぐに試してみてはいかがでしょうか?

 

【4】idとclassを適切に使い分ける

 

スタイルシートから余計な記述を省くために、idとpassは適切に使い分けるべきです。その使い分けの方法として、idはロゴのような個々の要素にスタイルを適用するものです。

 

一方で、classは様々な要素に適用されるスタイルを定義するときに用います。

 

ひとつの要素はひとつのidとひとつ以上のclassを含めることができます。

 

全体的なスタイルを定義するclassを使って、単独のプロパティを適用するidを使えば、使い勝手がとてもいいですね。

 

【5】複数のスタイルシートはひとつにまとめる

 

HTMLページにアクセスする度に、ブラウザはファイルを取得するためにHTTPリクエストを送らねばなりません。そのため複数のスタイルシートがあると、読み込みに時間がかかってしまいます。

 

CSSファイルをまとめるツールはたくさん提供されていますので、そうしたツールを使ってみるのもいいでしょう。

 

【6】テキストエディタを使う

 

CSSを書くときに標準のノートパッドを使っているのは、時間の無駄を生みます。CSSに対応したテキストエディタを使うようにしましょう。

 

【7】CSSを最適化し軽くしてくれるツールを使う

 

CSSを最適化して軽くしてくれるツールはインターネ上に無数にあります。代表的なものは「clean css」などがあります。また「Unused css」のように、すべてのページを探索して、使われていないCSSを省いてくれるツールもあります。

 

【8】CSSファイルを小さくするかGzip圧縮を使う

 

Webサイトのロード時間を短縮するためにもCSSファイルは小さく圧縮されているほうがいいです。

 

CSSファイルを小さくするには、空白やコメント、不要なセミコロンを取り除くことです。最小化されたCSSファイルは元のファイルの80%ほどまで小さくなります。

 

またGzip圧縮を使ってCSSファイルを圧縮することもできます。圧縮すれば70%程度までファイル容量を落とすことができます。Gzipを使うには下記のコードをhtaccessに追加します。

 

 

(※本稿は「Good practices for efficient

and maintainable CSS」を翻訳・再編集したものです)

関連記事

おすすめ記事