機能が行動を誘発する

自作しているCSS プリプロセッサー、YACPにcss-whitespaceというライブラリを導入した。css-whitespaceがどのようなものかというと、例えば

form
  button
    border-radius: 5px
    padding: 5px 10px

@media print
  body
    padding: 0

  button
    border-radius: 0
    width: 100%

上記のコードをcss-whitespaceに通すと、

form button {
  border-radius: 5px;
  padding: 5px 10px;
}

@media print {
  body {
    padding: 0;
  }
  button {
    border-radius: 0;
    width: 100%;
  }
}

このようなCSSを出力する。

css-whitespaceを用いるとCSSで以下のことが可能となる。

プロパティ定義の末尾の;の省略
インデントによるブロックの表現
ネストによるセレクタの表現

YACPではコンパイル時に-w (--whitespace)オプションを渡すことで、これらの記法を用いたコードをコンパイルできるようにした。

$ yacp -i input.css -o output.css -w

今までYACPにcss-whitespaceを導入していなかった理由は2つある。

1つは、YACPのコンセプトが「本質的にCSSの設計を良くするためのプリプロセッサー」なので、css-whitespaceによるただCSSのシンタックスシュガーを提供するだけの機能は不必要だと考えていたからだ。

そして2つ目の理由は、個人的にセレクタのネスト表記はときにバッドパーツになりうると思っているからだ。セレクタのネスト表記はSassやStylus等のメジャーなCSS プリプロセッサーにもある機能で、セレクタの親子関係を親のルールセット内にネストして記述できるもの。親要素を何回も書く必要がなくなり、とても便利でSassを書くときにいつも使っている機能だ。

しかしこのセレクタのネスト表記の機能があると、初めてSassを使ってみようとなったときに、ついついネストしたコードを書く傾向がある気がしている。CSSをわかっている人なら、セレクタのネストはルールの詳細度を高めていることだと分かっているので、必要なときにしか使わないと思う。だが、そうでない人は下記のような無駄にネストして詳細度を高めてしまったコードを書く人が多い。

.container {
  width: 960px;
  .sidebar {
    .menu {
      // 
    }
  }
}

僕自身このようなコードを書いてしまったことがあるし、人が書いているのも見てきた。僕がCSSを始めたときにはCSS プリプロセッサーというものは存在していたし、Sassについて調べると「ネストが使えてすごく便利」って推し機能のように書かれている気もしなくもない。それに最近だと若者が初めてRailsでWebアプリ作るぞってなったときに、Sassを強要されるのもある。

このようなことはCSS プリプロセッサーのネスト記法に限ったことではないと思う。Rubyを始めたら.mapとか使ってよりRubyっぽい書き方がしたくなるものだ。人は、機能があるとそれを使ってみたくなる、機能は行動を誘発するものだと思う。

そしてこれはプログラミング言語、ソフトウェアに限ったことでもない。世の中のありとあらゆる道具にあてはまると思う。モノを作るときはシンプルに、または、YACPでネスト記法をオプションで有効にできるようにしたように、ユーザーに機能を選択させるのもいい。モノ作りをする人は使う人のことを考えて道具をデザイン・設計すべきだし、僕ももっとそうなりたいと思う。