CSS設計の基礎概念 #CSS

前提

リッチなWebサイトが流行る昨今において、CSSやjavascriptなどのコードが複雑化してきました。それにより、長期的に管理していくためにもより構造的なCSS設計をすることが必要です。そのうえで、最低限しておくべき、CSS設計の基礎をまとめてみました。

破綻しやすいCSSの特徴

以下がよくある破綻しやすいCSSの設計です。長期的に管理していくサイトにおいて、以下の要素が少しでも見受けられる場合修正するべきでしょう。

HTML側のコードと同じ構造で作られている場合

index.html.erb

<div class="contents">
  <h1>見本</h1>
  <div class="list">
    <ul>
      <li>テスト1</li>
      <li>テスト2</li>
    </ul>
  </div>
</div>

index.css

.contents list ul li {
  text-align: center;
  font-size: 15px;
  margin: 10px 10px;
}

こういったコードがある場合、もし以下のような修正がhtml側に入ったら、どうなるでしょうか??

index.html.erb

<div class="contents">
  <h1>見本</h1>
  <div class="test">
    <p>テスト</p>
    <div class="list">
      <ul>
        <li>テスト1</li>
        <li>テスト2</li>
      </ul>
    </div>
  </div>
</div>

仮に、html側の構造と同じものでcssを書いていた場合、以下のように修正する必要が出てくるでしょう。

index.css

.contents test list ul li {
  text-align: center;
  font-size: 15px;
  margin: 10px 10px;
}

今回のようなものであれば、すぐ修正できますが、一般的にWebサイトにおいては、より複雑な構造になっていますので、今回のように簡単に修正することは難しくなるでしょう。なので、htmlの構造に依存しないcss構造を構築する必要があります。

追加したコードを取り消すためだけのCSSが書かれている場合

もし、以下のように追加したCSSを消すためだけのcssが書かれていたらどうなるでしょうか。

index.css

.test {
  font-size: 16px;
  padding-top: 10px;
}

.remove {
  padding-top: 0px;
}

index.html.erb

<div class="test remove">
hogehoge
</div>

こういったものはコードをより複雑化させ、コード量も必要以上に多くなり、管理がしにくいものになります。cssは追加する場合のみ定義するようにすべきです。

絶対値を多くの場面で使用している場合

親要素によく指定しがちなものが、こちらです。

index.html.erb

<div class="contents">
  <div class="nav">
    hogehoge
  </div>
</div>

index.css

.contents {
  line-height: 1.5;
  margin: 10px 10px;
}

.nav {
  padding-top: 10px;
}

上記のような場合、親要素のline-heightが子要素にも反映されてしまいます。このように影響範囲の大きいクラスやIDなどにはこのようなものを定義するのはさけるべきです。

よりよいCSSとは

HTML/CSS関連のドキュメントなどを多数書かれていらっしゃるフィリップ・ウォルトン氏によると以下の4つがよりよいCSSの特徴のようです。
参考: http://article.enja.io/articles/css-architecture.html

予測しやすい
再利用しやすい
保守しやすい
拡張しやすい

予測しやすい

チーム開発において、非常に重要な要素でもあるのが、コードが予測しやすこと。これは、そのままの意味でCSSコードが予測した通りに動いてくれることを意味しています。複雑なプログラムになればなるほど、CSSも複雑化し、思い通りに機能してくれなかったり、コード通しが悪影響を及ぼす場合もあります。そのようなことを避けるためにも、他者が読んで予測しやすいCSSを書く必要があります。

再利用しやすい

複雑化するにつれ、ほぼ必ず似たようなCSSコードを書く場面が出てくる。その場合に、毎回同じようなコードを書くのではなく、コンポーネントつくりコードを再利用し、必要以上にコードが増えることを避けるべきだという考えです。

保守しやすい

Webにおいて、短期的にキャンペーンをうったりして新しい機能やルールが増えることがあります。そういった場合に、CSSを毎回リファクタリングする必要のないように日頃から設計するべきだという考えです。

拡張しやすい

チームで開発するうえで、サイトのメンテナンスが必要になってきます。そういった場合に、誰がコードをいじっても管理しやすいようになっているべきでしょう。そういった意味合いで、サイトが大きくなるにつれて、既存のCSSが拡張しやすくなっているべきです。