Edited at

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

More than 3 years have 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がいい感じそうだったので試してみた