January 28, 2015

Wisteria：デザインツールとしてのCSS

A class selectors based harmless CSS library

WisteriaというCSSライブラリ作った。基本的な用途としてはモックアップや後方互換とかそこまで考えなくていい、小規模の個人用のページとかで使われることを想定している。

Skeletonという、すごくシンプルなCSSライブラリがあるのだが、僕はこれが好きで、ちょっとしたものとか作るときによく使用している。このブログもSkeletonをベースにしているくらいだ。

でも最近使ってて、なにかこう違和感というか、相容れないモノを感じたので、思い立って自分用のCSSライブラリを作ってみたのだ。

Harmless

Wisteriaを作るにあたって、一番気をつけたことは無害であること。つまり要素にスタイリング（h2 { font-size: 24px }みたいな）しないことを徹底した。ほとんとクラスセレクタ（.h2 { font-size: 24px }みたいな）でしか定義していない。

これはなぜかというと、基本的にh2なんてものは見出しとして大きく扱われるべきだけど、それは基本的にであって小さい文字列のh2要素だって時としては存在する（重要な文言であったり、余白を使えば必ずしもフォントサイズが大きい必要がない）。そうゆうゆうわけで、Skeletonとか使ってると、h2要素にスタイルが定義されているので、この文字を小さくするために再定義しなければならない。

これ、すごくめんどい。

いや、本腰入れて開発しようとかだったら再定義なんなりするけど、ちょっとしたページを作ったり、サイズ感を試したいときに思考が妨げられる。

 .h1, .u-fz1 { font-size: 6.4rem; }
 .h2, .u-fz2 { font-size: 4.8rem; }
 .h3, .u-fz3 { font-size: 3.6rem; }
 .h4, .u-fz4 { font-size: 2.4rem; }
 .h5, .u-fz5 { font-size: 2.0rem; }
 .h6, .u-fz6 { font-size: 1.8rem; } 
 .u-fz7 { font-size: 1.6rem; } 
 .u-fz8 { font-size: 1.4rem; }
 .small, .u-fz9 { font-size: 1.2rem; }
 .u-fz10 { font-size: 1rem; }

また、最近のCSSライブラリはNormalize.cssで初期化されているのが前提だけど、これもやめてほしい。デフォルトのスタイリングをうまく残して初期化するものだけど、僕はブラウザのデフォルトスタイルを熟知しているわけではない。だから要素ごとのマージンとかも一律ゼロにしたい。そうゆうよくわからないものを覚えるために時間をかけたくない。

ということで、WisteriaではHTML5-Resetを使ってキレイにリセットしてある。僕は真っ白なキャンバスに描きたいのだ。

Helper

Wisteriaには多くのヘルパークラスというか、ユーティリティ系のクラスを保持している。

/*	#Spacing
\*------------------------------------*/
.u-ma { margin: auto; }
.u-mtn { margin-top: 0; }
.u-mts { margin-top: .4rem; }
.u-mtm { margin-top: 1.6rem; }
.u-mtl { margin-top: 3.2rem; }
.u-mtx { margin-top: 4.8rem; }
.u-mbn { margin-bottom: 0; }
.u-mbs { margin-bottom: .4rem; }
.u-mbm { margin-bottom: 1.6rem; }
.u-mbl { margin-bottom: 3.2rem; }
.u-mbx { margin-bottom: 4.8rem; }
.u-mn { margin: 0; }

.u-から始まるもの。こうゆう単一的な仕事をするクラスを多くもつのはMapleでもやったことだが、あれはイレギュラーなデザインに対応するためである。

しかし、Wisteriaでは問題の背景がちがう。先ほどのHTML5-Resetで完全にマージンなどもリセットしてあるので、自分でマージンを設定しなければならない。そのおかげで、自由自在に自分でスペースを調整することが可能だ。

マージン以外にも多くのヘルパークラスがあるのだが、これはこれで学習コストが高くつくかもしれない。ということで命名規則に関してはEmmet風味な短縮形を採用しているので、ヘルパークラスに理解してなくても、だいたい予想がつくだろう。

Hi-Control

局所的なレイアウトはスペーシングのヘルパーでなんとかなるけど、全体的なレイアウトにはグリッドシステムが必要だ。それに関してはFlexboxをベースにしたグリッドシステムを採用している。

これが何が嬉しいかというと、floatとかで頑張ってるグリッドシステムのCSSライブラリはグリッドセルに対して、例えば3分割したかったら class="cell-1of3" みたいに書かないけどいけない。これ覚えるの大変だし（そうでもないか）、分割数を変える度にいちいち書き直すのもめんどい。

  <div class="g-row">
    <div class="g-col">1/6</div>
    <div class="g-col">1/6</div>
    <div class="g-col">1/6</div>
    <div class="g-col">1/6</div>
    <div class="g-col">1/6</div>
    <div class="g-col">1/6</div>
  </div>
  <div class="g-row g-row--collapse">
    <div class="g-col">1/3</div>
    <div class="g-col">1/3</div>
    <div class="g-col">1/3</div>
  </div>
  <div class="g-row">
    <div class="g-col">auto</div>
    <div class="g-col u-w80">80%</div>
  </div>

てことで、Wisteriaでは.g-rowの列に.g-colの名前の要素を入れとくだけでうまいこと分割数に応じてやってくれる。Flexbox様々である。

その分、最新ブラウザにしか対応しなくなるけど、あくまでモックアップや個人用途で使うことを考えれば、十分メリットのほうが大きい。

結局作ってみて、真っ白なキャンバスを自由に操れるツールがほしかったのだとおもう。

Wisteriaを使ってモックサイトを作るとなると、HTMLのclass属性にヘルパークラスを書き込みまくることになって、コンテンツとスタイルの分離とは！という状況なんだけど、そもそもPhotoshopやSketchを使ってデザインをするにあたって、それらを分けて考えるかというと、NOだ。

SketchにContent generator sketch pluginというものがあるように、アタリとはいえ、デザイナーはそこにどんなコンテンツが来るのか考えながらデザインしている。

Designing in the browser

話戻って、このブログの静的なページデザインファイルなんてものはない、いわゆるインブラウザデザインをして作ったわけだが、この時の違和感というか、やりにくさの原因が分かった。

結局、ブラウザでデザインするにはHTMLファイル（テンプレートファイル）とスタイルシートを行き来しなければならないのだ。そして下手にマークアップ脳もあるため、メンテナンス性を考えたCSS設計、命名の適当さなど考えると結局デザインしづらくなってしまう（デザインに集中できなくなってしまう）。

HTMLファイルにだけに集中して、ガシガシ書き込んでいけば、どんどんビジュアルが完成されていく。つまりは、Wisteriaにおける（ユーティリティ）クラス属性はデザインするためのコマンドみたいなものだ。うん、実にやりやすい。トライアンドエラー繰り返すことができる。インブラウザデザインと言って、最初からコンテンツとスタイルの分離を意識するからやりにくいのであって、いったん、それは忘れる必要がある（だからといって、style属性で書くように密結合することもない）。

Wisteriaを使えば、PhotoshopやSketchでマウスで操作するように（それに近い状態で）、ブラウザ上でデザインしていけるだろう。

僕はこうゆうのを求めていたんだ。