Tips2018.05.21

スタイルガイドジェネレーターはfractalがおすすめ！メリットとデメリットは？

CSSのスタイルガイドは何で作っていますか？

プロジェクトによってスタイルガイドを作るかどうか違いますが、長期運用するようなサイトではスタイルガイドがあるとUIが目に見えて分かるので重宝します。

これまでスタイルガイドを作る時はhologramをメインに使ってきました。

もうスタイルガイドを作るならhologram1択くらい気にいって使っていたのですが、fractalの出現でhologramに別れを告げました。

目次

fractal

fractalはNode.jsで動かすことができるスタイルガイドジェネレーターです。

これからスタイルガイドを作るなら迷わずfractalを選択します。

fractalが気に入ったのには3つの理由があります。

スタイルガイドジェネレーターといえばhologram、SC5、KSSなどがありますがドキュメントを生成するためにはスタイルシート内にコメントで記述するものが多いです。

その一方でfractalはスタイルシート内ではなく、Handlerbarsファイルに記述するようになっています。

スタイルシートにコメントでHTMLを書くのにemmetを始めとした補完が効かず、ドキュメントを書くのが正直つらかったです。

fractalならHandlebarsファイルなので補完が効くし、テンプレートファイルなので設定ファイルから変数を渡したり、HTML記述の自由度が高くドキュメントを書くのがはかどります。

fractalは開発時に利用でき、browser syncが利用されている開発サーバーが用意されています。

1
$ fractal start —sync

上記を実行することで、サーバーを立ててファイルに変更が発生すると自動でリロードされます。

自分でローカルサーバーを立てたり、直接HTMLを開く必要もないので開発速度が早く利用していてストレスがありません。

fractalがかなりイケているのは使い勝手が良いだけでなく、ドキュメントがめちゃくちゃ見やすいです。

UIが確認できるのはもちろん、実装に使われているHTML、CSS(SCSS)が確認できます。

HTMLが確認できるスタイルガイドジェネレーターは多くありますが、CSSも合わせて確認できるのはポイントが高い。

実装内容をひと目で確認できるので見る点においても、他のスタイルガイドジェネレーターよりも評価できます。

お気に入りのfractalですが、プロジェクトによってはデメリットになることがあります。

それはディレクトリ構成が少し冗長になってしまうことです。

たとえばボタンのドキュメントを作ろうとした場合は専用のディレクトリで区切ってスタイルを配置する必要があります。

1
2
3
4
— button
    |— button.css(scss)
    |— button.hbs
    |— button.config.json(yml)

こんな感じでテンプレートと設定ファイルをまとめる必要があるので、階層が深くなってしまいます。

プロジェクトの途中から導入する場合だと、ディレクトリ構成を変更しなれければいない可能性が高いですね。

また使うのを辞めたくなった場合においても、ディレクトリが無意味に1階層深くなってしまいます。

スタイルガイドのテンプレートに制限がなければfractalを使っていこうと思います。

ブランド的にテンプレートから完全に独自にする場合は、テンプレートのカスタマイズ性が高いhologramを使うことになりそうです。

スタイルガイドは運用しなければ意味がないどころか混乱の元にもなるので、更新のストレスがなく見るにも使いやすいfractalはとてもオススメですよ！