@shwldさんのスタイルガイドジェネレータを比べてみた という記事を読んで非常に良い！わかりやすい！とおもったのですが、古くなってしまっていたため、自分でまとめ直しました。
スタイルガイドジェネレータとは？
スタイルガイドとは、デザインする前の要素やグラフィック、デザイナーやエンジニアが従うべきルールなどを集めたものです。スタイルガイドがあれば、バラバラのWebサイトの部品に一貫性を持たせて、最終的に一体感のある体験を作り出すことができます。
引用元 : Webデザインのスタイルガイドの作り方
今回でいうスタイルガイドは、HTML / CSSのルール・規約を集めたものを指します。
スタイルガイドジェネレータはそのスタイルガイドを生成するツールのことを指します。
bootstrapやbulma.ioのドキュメントのようなものを、自分の書いたHTML / CSSで作ることができます。
以下は一例ですが、このようにプレビューやHTMLのコードが書いてあるものが多いです。(スタイルガイドジェネレータはfrontnoteを使っています。)
スタイルガイド導入のメリット・デメリット
どのような場面でスタイルガイドを導入するのが最適なのか、わからない人のためにざっくりですが、メリットとデメリットを書いておきます。
メリット
- 共通認識をもって制作を進めることができる。
- コードの統一化がしやすい。
- CSSが苦手な人も、HTMLをコピーしてスタイルを当てることができる。
デメリット
- イレギュラーな改修が多い場合でも、スタイルガイドの制約に縛られてしまう。
- スタイルガイドジェネレータのバージョン非対応などの問題が発生する可能性がある。
つまり、大規模なWebサイトを複数人で作成するときに、スタイルガイドが大活躍します！
スタイルガイドジェネレータの選び方
スタイルガイドジェネレータを調べた際に、10個以上のスタイルガイドジェネレータを見つけましたが、冒頭でも述べた通り古くなってしまっているものが多いです。
そのようなスタイルガイドは、Node.jsなどのバージョン違いによって使えなかったりするかもしれないため、最終更新日をしっかり確認して導入しましょう。
オススメのスタイルガイドジェネレータ
私は以下の点を条件にスタイルガイドを見ていきました。
- GitHubのスター数 1000以上
- 更新が一年以内
条件を満たしていた、fractal、sc5-styleguide、kss-nodeに関してまとめていきます。
| 名前 | github スター数 | 最終更新日 | sass(less) | 書き方 |
|---|---|---|---|---|
| Fractal | ★1412 | 1ヶ月以内 | ○ | 別ファイル |
| sc5-styleguide | ★1243 | 4ヶ月前 | ○ | コメントアウト |
| kss-node | ★1397 | 2ヶ月前 | ○ | コメントアウト |
fractal
(引用元 : http://fractal.clearleft.com/)
特徴
- 別ファイルにスタイルガイドで用いるhtml等を書く
- 主なテンプレートエンジンはHandlebars
- componentとdocumentに分類されており、構造がわかりやすい
- スタイルガイドを導入する際に、他のスタイルガイドに比べて工数がかかる
- configでかなり融通を利かせることができる
わかりやすい記事
sc5-styleguide
(引用元 : http://demo.styleguide.sc5.io/)
特徴
- スタイルにコメントアウトを書いて書き出せる
- コメントアウトのルールが厳しく、エラーがでがち
- navが上部にある(珍しい気がする)
- スタイルを検索できる
わかりやすい記事
kss-node
(引用元 : http://kss-node.github.io/kss-node/)
特徴
- スタイルにコメントアウトを書いて書き出せる
- コメントアウトのルールが厳しく、エラーがでがち
- テーマが充実している
わかりやすい記事
以上、スタイルガイドジェネレータ3選でした！
sc5-styleguideがKSS準拠なので、sc5-styleguideとkss-nodeは大きくは変わりませんが、私は検索バーが欲しいが故にsc5-styleguideを導入しました！
Fractalは今後もどんどんアップデートしていく予感がしますね！
まだ私も知らないスタイルガイドがあるかもしれませんので、コメント等で教えていただけたら幸いです。
ご精読ありがとうございました！