時が経つにつれて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」を翻訳・再編集したものです）
おすすめ新着記事
おすすめタグ