CSSを書くときに気をつける事

この記事はRelux Advent Calendar11日目の記事です。

CSSについて

CSSは学習コストが低いので割とすぐに書き始める事ができるのですが、構造化するための仕組みがなく意識して書かないと、すぐに影響範囲がわからなくなったりメンテナンスしにくい状態になって強引にスタイルを当てる事が多くなります。
今回はそれほど意識して来なかったCSSを書くときに意識した方がいい基本的な考え方を調べて見ました。

要素セレクタとid,classセレクタを同時に使わない。

たまにやってしまっているのですが、同時につかってしまうと特定の要素でしか利用できず、再利用性が下がり、同じようなコードが増える原因になります。

NGパターン

div.error {
   color: #red;
   font-size: 25px;
}
div#footer {
   margin: left;
   width: 100%;
   height: 41px;
   left: 0;
   right: 0;
   bottom: 0;
   position: fixed;
}

OKパターン

.error {
   color: #red;
   font-size: 25px;
}

#footer {
   margin: left;
   width: 100%;
   height: 41px;
   left: 0;
   right: 0;
   bottom: 0;
   position: fixed;
}

スタイルの取り消しを行わない

Normalize.cssなどのブラウザ間のでデフォルトスタイルをリセットするためのCSS以外ではできるだけ取り消しさないようにした方が良いです。

NGパターン

h2 {
    font-size: 2em;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ccc;
}

.no-border {
    padding-bottom: 0;
    border-bottom: none;
}

↑はh2に対して、下線をつけたくないときに no-boaderで打ち消すように書いてます、
ただ、これは以下のように書く事でコード量を少なく書き換えれます。

OKパターン

h2 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

.headline {
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ccc;
}

行数が増えてきたCSSでスタイルの取り消しを頻繁に行うと、無駄にファイル数が多くなるのでロードにかかる時間が増えるので、意識していきたい所です。

ハードコードしない。

プログラミングでハードコードは良くない事で有名ですが、CSSでも同様に良い方法ではないです。
例えばユーザーのアイコンを円形にしたい場合以下のように書く事ができます。

NGパターン

account-image {
   width  : 50px;
   height : 50px;
   border-radius : 25px;
}

↑のように記述すると、横縦50pxの円形のスタイルを作る事ができますが、今のままだとサイズに変更が会ったとき border-radius の値を毎回変更する必要があります。

OKパターン

account-image {
   width  : 50px;
   height : 50px;
   border-radius : 50%;
}

このように、設定する事で幅が変わっても値を変更する必要がなくなりました。全てをこのように書くことは難しいですが、意識しておくと変更に強いコードになります。

また、width、heightもハードコードされているのですが、そちらに関しては変数を利用できるようにする、Sass などのCSSプリプロセッサなどで管理してあげるのが良さそうです。

詳細度を意識する。

CSSは基本的に後に定義されたプロパティが優先されます。ただ、適用されるスタイルはそれ以外にもルールがあります。

div h1 {
    font-size: 35px;
}

h1 {
    font-size: 30px;
}

この場合、定義された順序は　font-size: 30px が後ですが実際には font-size: 35px; が適用されます。
理由としては、セレクタには詳細度という値が存在しており、適用される際にその数値を参照しています。自分の書いたCSSが適用されない場合などはが原因の可能性があるので、見返して見ると良いかもしれません。
詳細度の説明はこちら

まとめ

今までレイアウトを表現する事に重点に置いて、CSSの書き方を意識する事が少なかったのですが、OOCSS, BEMなどの有名な設計思想を学ぶ以外にも基本的な考え方を学ぶとより可読性の高いコードを書く事ができると感じました。CSS自体もどんどん新しい仕様が策定されているので、定期的に知識のアップデートをしてより便利で読みやすいコードにしていきたいです。

参考

• 詳細度
• Code smells in CSS