CSSも軽量化の時代！コーダーが押さえるべきCSSコーディング5つのポイント

酒井涼

2017年7月6日

1,382

ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。
　　
>> 執筆記事一覧はこちら

SassやLESSなどのCSSプリプロセッサーを使わずにCSSを書いているひとは未だに多いのではないでしょうか。
日常の業務でCSSを記述していると、どうしてもCSSはセレクタやプロパティの繰り返しが多くなってしまい、冗長になりがちです。

CSSだけでなく、あらゆる要素には軽量化が求められます。
ページ速度が遅くなれば、それだけ直帰率が多くなり、また検索エンジンもそのことをマイナスに評価して、結果的にページ全体のアクセス減につながってしまいます。

最近では、idセレクターやHTMLタグのセレクターを取り除く動きもあります。
効率よくCSSを書いていくには、どのようにして書いていけばいいのでしょうか。

今回は、コーダーが押さえるべきCSSコーディング5つのポイントをご紹介します。
シンプルに書くことを意識すれば、ファイル容量が軽量化するだけでなく、だれもが読みやすいファイルになります。
具体的にはどのような点を押さえればよいか見てみましょう。

コーダーが押さえるべきCSSコーディング5つのポイント

1. クラス名だけに徹する

15年も前は数ページほどしかないWebサイトを構築するだけで済んでいましたが、WordPressやMovableTypeのようなCSSを使って100ページ以上のHTMLファイルを(動的に生成するにせよ)扱わなければならないという場合も少なくないでしょう。

そうした場合に、HTMLタグとクラス名、そしてid名が混在しているCSSは、パーツが増えていくと、情報が混雑して何がなんだか分からなくなってしまいます。

そこで選択肢の一つに入れておきたいのは、クラス名だけに徹してスタイリングをするということです。
すなわち、複数の要素に適合されるHTMLタグや、1ページにたった1つにしか適用できないid属性は、思い切って省いてしまうということです。

例えば、次のようなCSSファイルとHTMLファイルがあるとします。

footer { }
input[type='text'] { }
h1 { }
.some-list ul { }
.some-list ul li { }

<footer></footer>
<input type="text" />
<h1></h1>
<div class="some-list">
　　<ul>
　　　　<li></li>
　　</ul>
</div>

これは、HTMLファイルにはあまり余計な設定がされておらず、綺麗に見えるかもしれませんが、セマンティックであるか(情報構造として分かりやすいか)といえば、そうではありません。

一方、これをクラス名だけに徹してみると、このようになります。

.footer { }
.text-input { }
.title { }
.some-list { }
.some-list--item { }

<footer class="footer"></footer>
<input class="text-input" type="text" />
<h1 class="title"></h1>
<ul class="some-list">
　　<li class="some-list--item"></li>
</ul>

class名を付したために、さきほどよりHTMLファイルが若干冗長に見えてしまうかもしれませんが、以前よりセマンティックになりました。
そして、CSSはクラス名に徹することで、ずいぶんすっきりと書くことができます。

タグとクラス名を混在させてしまうと、どちらを書けばいいのかを考えるのに結局時間がかかってしまうので、クラス名に徹して書くくとをおすすめします。
新しい要素を付け加えるときにも、これまで通り新しくクラス名を追加すればいいのです。

2. カテゴリごとに分ける

CSSファイルが長くなれば長くなるほど、情報が煩雑になって、素早く必要な情報が探せなくなってしまいます。
CSSの記述が短ければ問題ないのですが、サイトが巨大化すると、修正作業に時間や手間がかかってしまうのです。

そうしたCSSファイルの煩雑さを回避する上で最も簡単な方法は、カテゴリごとにCSSの記述を分け、クラス名で管理することです。

/  reset /

/  general /

/ typography /

/ header /

/ footer /

このようにコメントを上手に活用することで、全体のごちゃごちゃした構造をすっきりさせることができます。

3. 部品を共通化する

CSSの特性でもあり初心者がやってしまいがちなこととして、CSS全体で何度も同じようなコードを書いてしまうことです。
しかし、同じ内容を繰り返すのはファイルサイズが大きくなるだけでなく、かえって読みにくくなってしまうので、避けるべきです。

例えば、2つの異なるボックスをスタイリングしているとしましょう。
一見すると2種類のボックスを作成するのに最低限必要なコードのように見えますが、よく見ると文字色だけが違うだけであとは同じになっています。

.blueContents {
　　margin: 0 0 10px 10px;
　　border: 1px solid #eae8e9;
　　font-weight: bold;
　　color: blue;
}

.greenContents {
　　margin: 0 0 10px 10px;
　　border: 1px solid #eae8e9;
　　font-weight: bold;
　　color: green;
}

文字色以外は共通化できそうなので、共通部分と文字色部分に分割してみましょう。

.contents {
　　margin: 0 0 10px 10px;
　　border: 1px solid #eae8e9;
　　font-weight: bold;
　　color: blue;
}

.blue {
　　color: blue;
}

.green {
　　color: green;
}

共通でまとめられる部分は共通化し、同じコードを何度も繰り返すのを避けましょう。
これだけでも、ずいぶんすっきりと見やすいCSSへと変身します。

ちなみに、共通化したCSSはHTML側では以下のように実装します。

<div class="contents blue”>青文字のボックス</div>
<div class="contents green”>緑文字のボックス</div>

上記のコードのように、クラス名は複数実装が可能です。
その特性を活かして共通部分をできるだけ使いまわすと、ちょっとした飾りをつけるだけで似たようなコードを何度も繰り返してしまうのを防ぐことができます。

共通のコードをまとめておけば、汎用性も高まります。
汎用性が高まるということは、似たようなコードを何度も書く手間や行数を圧縮することにつながり、ソースコードの可読性向上や開発効率の向上につながっていくでしょう。

4. 同一プロパティを共通化する

次は、異なるセレクタで同じ設定のプロパティを含んでいる場合について考えてみましょう。
以下のコードでは、異なる複数のセレクタに「margin: 20px 0 30px 0」が設定されています。

.contents-table{
　　margin: 20px 0 30px 0;
}

.contents-ol{
　　margin: 20px 0 30px 0;
}

.contents-ul{
　　margin: 20px 0 30px 0;
}

.contents-dl{
　　margin: 20px 0 30px 0;
}

ご覧のように、同じようなコードが縦にびっしりと並んでいます。
これだけのコードを書くだけでも正直面倒ですし、同様の設定を行うセレクタが増えれば増えるほど、修正にも時間がかかってしまいます。

そこで、このようなグループ化を行うと、より短いコードになります。

.contents-table, .contents-ol, .contents-ul, .contents-dl {
　　margin: 20px 0 30px 0;
}

ただ、複数のセレクタを並列してしまうと、セレクタが増えるたびにどんどんと要素を増やさなくてはならず、使い勝手はどこかで悪くなってしまいます。

ある程度共通して使いまわす部分があるのであれば、思い切って以下のようなクラスを作ってみるのも一つの手です。

.margin-t20-b30 {
　　margin: 20px 0 30px 0;
}

tとbはそれぞれ「top」と「bottom」の頭文字を取っています。
「margin: 20px 0 30px 0」を何度も繰り返してしまうのであれば、これをクラス名として使ってみるのは有効でしょう。

5. GZipを使う

ホームページの読み込み時間を短縮するためにも、CSSファイルはできるだけ小さいほうがよいのは、いうまでもありません。

CSSファイルを小さくするために、空白やコメント、不要なセミコロンなどを除くのは、有効な手段のひとつとしてよく知られています。
圧縮されたCSSファイルは、元のファイルの80％ほどまで小さくなると言われています。

しかし、ファイルサイズを圧縮する方法は、これだけではありません。

GZip形式と呼ばれる、Webサーバーでも読み取ることのできる圧縮形式を使うことで、70％ほどまでファイル容量を減量することができます。
GZipをWebサーバーで読み取れるようにするには、.htaccessファイルに以下のようなコードを追加します。

# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain     text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP

CSSファイルをGZip形式に圧縮するには、圧縮ソフトを使うのが最も簡単で確実なやり方です。
Macの場合は、標準でインストールされているターミナルを立ち上げて、

$ gzip (ファイルパス)

を打ち込み、エンターキーを押せば、自動でファイルをGZip形式に圧縮してくれます。

まとめ

冗長で読みにくくなりがちなCSSも、工夫次第で読みやすく、軽量にすることは可能です。
今回はその中でも今すぐ実践できるポイントをご紹介させていただきました。

いずれのポイントにも共通して言えることですが、「ダブりは書かない」かつ「モレのないように書く」というMECEの考え方をCSSに持ち込むことが重要です。
CSSでファイルが重くなってしまう一番の原因はダブりなので、できるだけダブりを発生させずにロジカルに書いていくのを、ぜひ心がけてください。

参考：
MECEって？ロジカルシンキングの基本的考え方を理解して思考の抜け漏れを防ごう