デザイナーのいないチームでのCSSの書き方

スタートアップや少人数のチームでは、デザイナー（最終的なデザインの決定権を持つ人）がいないことも少なくないと思う。また、エンジニアだけで何かサービスを作ることも多いだろう。

僕自身、そのような環境でよく開発をする。僕はCSSはそこそこ書けるが、デザイナーではないのでサイトのデザインについては他のエンジニアと相談しながら決定している。 IllustratorやPhotoshopもほぼ全く使えないので（紙にざっくりレイアウトを書くことはあるが）、HTMLとCSSを修正しながらデザインを検討することになる。

「CSS書きました。」

「うーん、ここのコンテンツはもっと大きく表示させたい。色ももっと目立つ感じで。」

「なおしました。」

「うーん、やっぱり微妙かも。試しにここ2段組にしてみて。」

「」

なんてことになる。

今更言う必要はないと思うがCSSの設計は非常に脆く、アドホックな修正を繰り返したCSSはすぐに破綻する。この、デザイナーのいないチームで、いかにCSSを書いていくか。考えていることをまとめてみた。

SGDD: Style Guide Driven Development

スタイルガイド駆動開発（SGDD）という言葉がある。これは、Webサイトを作るときに先にデザインの共通部分を見つけ出し、コンポーネント化し、構造化されたHTMLと合わせたスタイルガイド作っておくというものだ。 SGDDをすることで、UIが一箇所にまとまり、再利用や調整が楽になる。また、OOCSSやSMACSSのようなCSSの設計手法を適用しやすくもなるだろう。

しかしSGDDは、Webサイトのデザインが予め決定していないといけない。なので、冒頭に書いたようなデザインの決定権を誰も持っていないチームでは導入することはできない。

汎用クラス

デザイナーのいないチームでどうやって上手く、CSSを書いていくか。僕は汎用クラスをたくさん書くのがいいと思っている。

CSSにおける汎用クラスというのは、下記のような単一のプロパティで定義されてたルールセットのことである。

.bk-gray {
  background: #eee;
}
.text-center {
  text-align: center;
}
.pdr-10 {
  padding-right: 10px;
}
.font-lg {
  font-size: 22px;
}

この汎用クラスのメリットは、急なデザインの変更が必要なときに、その都度そのためのルールセットを定義しなくても、汎用クラスの組み合わせで対応できるということだ。 paddingやmarginを細かく汎用クラス化しておくことで、レイアウトの修正が楽になる。これらの汎用クラスが大量に定義されてあるBASSCSSというCSS フレームワーク（ツールキット）もある。

しかし、すべてのスタイルを汎用クラスを使ってあてると、それはHTMLのstyle属性に書いているのとほぼ同じで、管理しにくくなるだろう。セマンティックを損ねることにもなる。汎用クラスを多用するのは、デザインが決定するまでが良い。

@extendとplacehoderセレクタ

汎用クラスを多用すると、管理が難しくなり、セマンティックさが低下する。デザインが決定したら、汎用クラスまみれのコードをリファクタリングする必要がある。

リファクタリングの方法として、Sassでいう@extendと、placeholderセレクタを使うのはどうか。まず、作った汎用クラスを全てplaceholderセレクタに置き換える。

%bk-gray {
  background: #eee;
}
%text-center {
  text-align: center;
}
%pdr-10 {
  padding-right: 10px;
}
%font-lg {
  font-size: 22px;
}

そして、これらを継承した新しいルールセットを定義する。

.content-box {
  @extend %pd-20;
  @extend %bk-gray;
  width: 480px;
  ...
}

このようにすることで、作った汎用クラスを意味のあるまとまりとして再定義することができる。リファクタリングとしてこれでいいのかは微妙だし流行りの理想的な設計とは異なるかもしれないが、応急処置的には十分な気がしなくもない。

まとめ

デザイナーいるならスタイルガイド駆動開発良い
デザイナーがいないとOOCSS等のCSS設計パターンに当てはめるのきつい
汎用クラスの量産で細かいデザインの修正に耐える
@extendで汎用クラスをまとめて意味を持たせる