CSSfmtという、CSSとSCSSのコードを自動整形するツールをつくった。
使い方はREADMEを見たらわかると思う。Atom, Sublime Text, Vim, Emacs用のプラグインがあるので、エディタで使うのがおすすめ。コマンドラインからも使える。
AtomでCSSfmtが動いている様子：
なぜつくったのか
チーム開発において、コードのフォーマットが統一されていないことがある。
フォーマットの小さな違いはわざわざ指摘するのもめんどうだし、指摘されても嫌な気分になる。なので、コードをあるルールに従って自動で整形するツールの導入は必須だと思う。
CSSコードの整形ツールはいくつかある。CSS BeautifyやCSScomb、stylelintでも可能だ。
これらのツールとCSSfmtの違いは以下の3点である。
- Custom propertiesや
color()等の未来のCSSの記法に対応 - SassのSCSS記法に対応
- フォーマッティングのオプションが一切ない
CSSfmtはパーサーにPostCSSを使っていて、それゆえに未来のCSSの記法やSCSSに対応することができた。今後はSASSやStylusのようなインデントでブロックを表現するような記法にも対応できるだろう。
CSSfmtの最大の特徴は、フォーマッティングのオプションが一切ないことだ。
CSScombや、特にstylelintではかなり詳細にフォーマットを指定することができる。しかし、そのために巨大な専用の設定ファイルを用意しなければいけない。
CSSfmtも始めはいろいろとオプションを指定できるように実装していたが、 読みやすいCSSのコード にするにはそんなに細かく設定する必要はないのでは、と感じて一切の実装をやめた。
読みやすい例：
div > p {
font-size: 12px;
line-height: 1.5;
}
このようなコードを読みやすいと感じる人はいない：
div >p
{
font-size:12px;line-height:1.5
}
インデントだけは好みが別れるので、editorconfigを使っていて、プロジェクトのディレクトリに.editorconfigがあるときはそちらに合わせることにした。（editorconfigを使っていないと2スペースのインデントになる）
セレクタと{の間は1スペースか改行か等、他にも好みが別れるところがあるとは思う。フォーマッティングのためのオプションを実装してくれとissueも立ったが、CSSfmtではただ1つのフォーマットに統一した。ほとんどの人がこのフォーマットルールに従ってCSSを書いてるんじゃないかと思う。
CSSfmtがGofmtのようにCSSのフォーマッターとしてみんなが当たり前に使ってもらえたら、という気持ちでつくった。
本質的な問題解決
ここまで書いてきたCSSfmtをつくった理由は嘘ではないが、後づけでこじつけなところがある。
CSSfmtは、何かの問題を解決するためだったり、需要があって生まれたものではない。何かしらのアウトプットをし続けないといけないという、強迫観念のようなものから作られた。ソフトウェアエンジニアならこのような気持ちからアウトプットをしている人も少なくないと思う。CSSfmtのGitHubのスター数はもうすぐ700になるが、これは本当に運が良かったからとしか言えない。
僕は「本質的な問題解決」という言葉をよく口に出す。
本当にいいモノは、セルフブランディングのためや、手当たり次第に、作れるからという理由で作っても生まれないと思う。GitHubで草を生やすために無意味なcommitをしたくない。今抱えている問題について正確に理解し、需要からトップダウンなプロセスで作られ、解決に導くものが、ホンモノだ。
これから来る老いに備えて、もっと全体を俯瞰し、本質を見極める目を養っていきたい。
若者からは以上です。