cssをより良く書くために気をつけている12のこと

最近ガジェットなエントリーばかりだったので、たまにはちゃんとした技術的なエントリーを・・。

CSSはとても簡単な言語で、誰でもすぐ書けるようになるんですが、とても壊れやすいものだと思います。
簡単に無駄なコードは増えやすいですし、無駄が無い方がブラウザのレンダリングはもちろん早いです。
今回はCSSを書く上で、メンテナンス性を保ちつつ、パフォーマンスの高いCSSを書く上で気をつけていることを書いていこうと思います。
CSSを書く上で気をつけているポイントは、とても普通なことですが、こんな感じですｗ

1. IDのルール
2. クラスのルール
3. タグのルール
4. 細かい書き方のルール

この辺りで書き方で気をつけるべきポイントを書いていこうと思います。

必要以上にセレクタを指定しない。

IDは1つしか適用出来ないので、一番強力なセレクタです。
あえて他のセレクタと一緒に指定する必要はありません。

// good
#someid {..}
#otherid {..}

子孫セレクタを使いすぎない

子孫セレクタを使いすぎると非常に脆いCSSになってしまいます。
下記の様なコードの場合、何か1つでも抜けるとすぐCSSが適用されてしまいます。

複数のクラスに適用するなら1つのクラスにまとめる

下記のようなCSSを作るくらいならば、1つのCSSのクラスをしたほうがメンテナンスしやすいですし、後から見てもわかりやすいです。

// good
.menu-left-icon {..}
[/css]

ダイレクトな指定を心がける

例えば下記の様なHTMLがあったとしたら、

個別のclassがあるので、aまで指定するのではなく、その上のレベルで指定をしていきましょう。

// good
#navigator {..}
[/css]

短く書けるものは短く書く

使えるのであれば、短いプロパティを使っていきましょう。

// good
.someclass {
padding: 20px 10px 20px 10px;
background: #000 url(../imgs/carrot.png) repeat-x bottom;
}
[/css]

無駄なセレクタの指定はしない

他の所でも書いていますが、セレクタの指定はなるべく最低限にしたほうが良いです。

同じようなCSSを書かない

書いていると忘れがちなのですが、結構同じようなCSS書いてしまいますよね。
そういうのは書かないようにしましょう。
sassを使っているのであれば、@includeなどをうまく使うのが良いと思います。

.someclass {
color: red;
background: blue;
font-size: 15px;
}

.otherclass {
color: red;
background: blue;
font-size: 15px;
}

// good

.someclass, .otherclass {
color: red;
background: blue;
font-size: 15px;
}
[/css]

再利用できるCSSはまとめる

HTMLの書き方にも影響してくるのですが、全体的なものに使えるもの（例えばボタンのShadowやpaddingなど）を指定して、個別に変更あるもの（例えば背景色）は個別にしていくと良いです。

.otherclass {
color: red;
background: blue;
height: 150px;
width: 150px;
font-size: 8px;
}

// good
.someclass, .otherclass {
color: red;
background: blue;
height: 150px;
width: 150px;
}

.someclass {
font-size: 16px;
}

.otherclass {
font-size: 8px;
}
[/css]

わかりづらい名前をつけない

CSSのclassなどの名前は略しすぎてしまうと、その後読んだ人がわからなくなってしまいます。
多少長くなってしまっても良いと思うので、わかりやすい名前を指定しましょう。

!importantsを使わない！

使っちゃいけないと思いつつついつい使っちゃうのですが、使わないほうが良いです。

宣言の順番を決めておく

コーディング規約などで書く宣言内でどのプロパティを呼ぶのか決めておくと、読みやすさが上がります。

改行をうまく使う

改行が無く、連続でつなげてしまうと、見づらいCSSになってしまいます。なるべく改行などを入れてあげると読みやすいです。
また、値が複数になる場合なども、改行してあげるとより読みやすくなります。

// good
.someclass-a,
.someclass-b,
.someclass-c,
.someclass-d {
…
}

// good practice
.someclass {
background-image:
linear-gradient(#000, #ccc),
linear-gradient(#ccc, #ddd);
box-shadow:
2px 2px 2px #000,
1px 4px 1px 1px #ddd inset;
}
[/css]

いかがだったでしょうか？
冒頭でも書きましたが、CSSは簡単に書けるのですが、とても脆いものです。
なるべくOOCSSに則って書くのが良いと思います。
偉そうに書いているのですが、なかなか全部出来ているということもないです。
ただ、心がけながら書くと少しだけ綺麗にかけたりするので、少しだけ心がけて書くとよりよいコードになる気がします。

パフォーマンスの高いCSSの書き方についてとても良くまとまっているのが下記の2サイトになります。
英語なのですが、コードを一緒に読めば読めると思います。
読んでみるととても勉強になります！

Google’s best practices for efficient CSS selectors

MDN’s guide to writing efficient CSS