Help us understand the problem. What is going on with this article?

CSSfmtをつくった話、もしくは本質的な問題解決とは

More than 3 years have passed since last update.

CSSfmtという、CSSとSCSSのコードを自動整形するツールをつくった。
使い方はREADMEを見たらわかると思う。Atom, Sublime Text, Vim, Emacs用のプラグインがあるので、エディタで使うのがおすすめ。コマンドラインからも使える。

AtomでCSSfmtが動いている様子:

atom-cssfmt

なぜつくったのか

チーム開発において、コードのフォーマットが統一されていないことがある。
フォーマットの小さな違いはわざわざ指摘するのもめんどうだし、指摘されても嫌な気分になる。なので、コードをあるルールに従って自動で整形するツールの導入は必須だと思う。

CSSコードの整形ツールはいくつかある。CSS BeautifyCSScombstylelintでも可能だ。

これらのツールと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をしたくない。今抱えている問題について正確に理解し、需要からトップダウンなプロセスで作られ、解決に導くものが、ホンモノだ。

これから来る老いに備えて、もっと全体を俯瞰し、本質を見極める目を養っていきたい。


若者からは以上です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away