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

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

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

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

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

fractal

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

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

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

1. ドキュメントを記述するファイルが別れている

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

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

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

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

2. デフォルトで開発サーバーが用意されている

fractalは開発時に利用することができる、browser syncが利用されている開発サーバーが用意されています。
$ fractal start —sync
上記を実行することで、サーバーを立ててファイルに変更が発生すると自動でリロードされます。

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

3. デフォルトのテンプレートが使いやすい

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

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

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

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

fractalのデメリット

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

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

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

— button
    |— button.css(scss)
    |— button.hbs
    |— button.config.json(yml)

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

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

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

テンプレートに制限がなければfractal

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

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

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

コウジ
Vue.jsが好きなフリーランスのフロントエンドエンジニアです。 フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。
目次
    Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発