はじめに

谷拓樹さんのWEB制作者のためのCSS設計の教科書を読み、自分なりにまとめたものです。

自分のメモとして残しておきたいので、詳細を多少端折っていますので、気になる方は購入してみてください。

数回に分けて投稿する予定です。

※追記
第２章のリンクを下部に追加しました。
2016/09/22　コード部分を見やすく変更しました。

css設計の重要性

運用期間が長く、規模が大きくなっていくwebサイト、アプリケーションのコードの管理をしていくのは大変。
コードを無駄に肥大化させず、思いもよらないバグを招かないようなコードを書くということは容易ではない。その為には、自分だけが理解し易いコードを書くのではなく、誰にでも理解しやすいコードを書くことが重要である。

開発に欠かせない設計

昨日まで単色の淡いベージュ色だった背景を、今日には青と白のストライプに変更すると言われれば、予め変更しやすいようにCSSを設計する必要がある。どのような変化に対しても全く手を付ける必要の無いCSSを書くことは不可能。だが、いかにしてメンテンス効率を下げずに、また、少ない工数で改修ができるようにするためにを考える必要がある。

より良いCSSをのゴール

Googleのエンジニアフェリップ・ウォルトンによると、以下ブログ↓
http://article.enja.io/articles/css-architecture.html

予測しやすい
期待通りに振る舞うかどうか。他のルールが影響して記述したルール通りの振る舞いや見栄えにならない、追加したルールが他のルールに影響を与えることがない。

再利用しやすい
コピペされて膨らみ続けるCSSにならないためにも、再利用しやすいルールをもつことは重要。

保守しやすい
新しいルールを追加・更新するときに、既存のルールのリファクタリングを必要としないことが重要。追加したルールによって既存のルールを壊してしまうことは避けるべき

拡張しやすい
自分と自分以外の開発者にとって、メンテナンス・管理がし易いものである必要がある。サイトが大きく、複雑になった際にも拡張しやすいものになっているかどうか。また他の開発者が関わるプロジェクトにおいてそのCSSの設計の学習コストも低くあるべき。

破綻しやすいCSS

htmlに依存している

test.html

<article>
  <h1>ブログのタイトル</h1>
 <div>
   <p>ブログの本文</p>
 </div>
</article>

test.css

article h1 {
  border-bottom: 2px;
  font-weight: bold;
  ….
}

test.html

<article>
  <h2>ブログのタイトル</h2>
 <div>
   <p>ブログの本文</p>
 </div>
</article>

test.css

article h2 {
  border-bottom: 2px;
  font-weight: bold;
  ….
}

htmlの構造が変化した際に、CSSまで変更しなくてはならない。
そこで、

renew.html

<article>
  <h1 class=“entry-title">ブログのタイトル</h1>
 <div>
   <p>ブログの本文</p>
 </div>
</article>

renew.css

entry-title {
  border-bottom: 2px;
  font-weight: bold;
  ….
}

とすれば、構造が変化した際にもCSSの変更は必要無くなる。

スタイルを取り消している

test.css

.title {
border-bottom: 2px;
margin-bottom: 1em;
padding: 10em;
font-size: 24px;
font-weight: bold;
}

test.css

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

下線が不必要なデザインの見出しが必要になり始めた場合。
取り消すCSSの記述が増える。

test.css

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

test.css

.headline{
  padding-bottom: 10px;
  border-bottom: 2px solid #000;
}

コードを取り消すものと比べて、コード量が減っている。定義したルールを取り消すのではなく、追加していくことを考える。

絶対値を多様している

test.css

.intoduction {
  line-height: 27px;
  font-size: 18px;
}

.lead{
  line-height: 27px;
  font-size: 18px;
...
}

test.css

.intoduction {
  line-height: 1.5;
  font-size: 18px;
}

.lead{
  line-height: 27px; #親の継承によって不必要
  font-size: 18px;
...
}

このリファクタリングのポイント

・line-heightを相対値にすることで、フォントサイズが変わっても同じ倍率を保つ
・子要素に継承するので、指定の必要がない
・単位の無い値にすることで、その要素のフォントサイズに対する倍率で行送りが計算される

モダンなサイト構築ワークフロー

一気に機能を作ってから見直すウォーターフォール型のワークフローから、機能ごとに短いサイクルで検証を繰り返すアジャイル型のワークフローが主流に。

要件定義→設計→実装→検証

2章に続く。
http://qiita.com/poster-keisuke/items/5d4f1e74b7f9155cfdaf