汎用クラスを使ったWebデザイン

CSSにおいて、以下のような単一プロパティで定義されたルールセットをUtility Classes、日本語で汎用クラスとかヘルパークラスだとか呼ばれる。

.text-center {
  text-align: center;
}

.font-sm {
  font-size: 10px;
}

.bg-blue {
  background-color: #0089ff;
}

.mgr-10 {
  margin-right: 10px;
}

汎用クラスを利用してスタイルを当てていくと、HTMLのclass属性値を変更するだけで素早くデザインの変更が可能だ。 Twitter Bootstrap等のCSSフレームワークにも汎用クラスはいくつか定義されていたり、BASSCSSという汎用クラスを大量に定義してあるフレームワーク（BASSCSSではlow-level CSS toolkitと呼んでいる）も存在する。

また、スタートアップや少人数のチームでは、デザイナー（最終的なデザインの決定権を持つ人）がいないことも少なくないと思う。 エンジニアだけで何かサービスを作ることも多いだろう。 僕自身このような環境で開発をしてきて、デザインについてはHTMLとCSSを書きながら、インブラウザデザインをして、他の人と相談しながら決めていく。 このような場合では、WYSWYG的にデザインできる汎用クラスの利用は必須なんじゃないかとも思っている。

しかし、汎用クラスを使った（使いっぱなしにした）Webデザインは、メンテナンス性を著しく低下させると考えている。 というのも、汎用クラスの名前にはそのようなデザインにした意図が含まれないからだ。

例えば、上記の.mgr-10には、「右側マージンを10pxとる」以上の意味がない。 これでは後から違う人がメンテナンスする際になぜこのスタイルが当てられているのかがわからない。

でも汎用クラスはとても便利だし、僕もこれからも使っていくだろう。 複数人で開発するときは、汎用クラスをプリプロセッサーの@extendとかでまとめて、意味のある名前にするのがいいと思っている。 また1人で管理するような個人サイトでは、ガンガン使っていいと思う。

Webサイトは、 情報システムであってアートではない（もちろんアートとして美しいサイトもある）。 マークアップはモックアップではないし、CSSは構造化文書の見た目を制御するスタイルシート言語だ。 だからWebデザインは「作ったら終わり」ではなく、保守の対象であり、リファクタリングの対象だと思う。

See also: