Ruby
CSS
Node.js
Sass
Styleguide

スタイルガイドジェネレータを比べてみた

More than 1 year has passed since last update.

スタイルガイドとは

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に落ち着きそうです。

続き
スタイルガイドジェネレータのsc5-styleguideがいい感じそうだったので試してみた