スタイルガイドとは
Twitter Bootstrapのように、コンポーネントごとにスタイルを見やすく定義した、CSSのコーディング規約のようなものです。
Bootstrapで作るような感じでオリジナルのデザインを作ることができるようになります。
今回は、プロジェクトに導入するため、デザイナーやプロダクトオーナーも含めたメンバーが出来るだけ触りやすいものを選びたいと思います。
比べるポイントとしては、導入の簡単さ、SASSに対応しているかどうか、あとは更新頻度を主に見ました。
| 名前 | 依存 | SASS | 利点 | 欠点 |
|---|---|---|---|---|
| KSS | ruby, sinatra or rails | ○ | 利用者が多い | あまり更新されていない |
| kss-node | nodejs | ○ | node版のnode-kssもある | gulpなどの周辺ツールがバージョン追随できていないためか、あまり安定しない |
| hologram | ruby | ○ | rubyでカスタマイズできる | rubyなのでwindows環境は辛い |
| sourcejs | nodejs | ○ | 高機能、画面上から値を変えたりできる | 機能が多く、導入の敷居が高そう。プロジェクトファイルが多くて気軽に勧めづらい |
| styledocco | nodejs | ○ | view書く必要ないためかなり敷居低い。 | あまり更新されていない, gulp-styledoccoが更新されておらずchromeで綺麗に表示できない(gulpを使わなければ問題ないらしい) |
| sc5-styleguide | nodejs | ○ | KSS準拠。最近も更新されている | CSSに書き込むコメントのルールがちょっと厳しく、すぐエラーになる |
最初styledoccoが敷居がとてつもなく低くいいかなと思ったのですが、chromeでの表示がおかしい問題が発生し、どうやらgulp-styledoccoが本体の更新に追いついていないせいらしい事がわかりました。
最初はあまり更新頻度は気にしていなかったのですが、今後のことを考えるとやはり活発なものを選びたいということで、sc5-styleguideに落ち着きそうです。