Help us understand the problem. What is going on with this article?

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

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

shwld
主に開発で得られた知見を記録していきます。 記載された内容は、所属する企業や団体の公式見解ではありません。
https://shwld.net
mof-mof
「つくって人をしあわせにする」をビジョンにAIチャットボットや開発チームレンタル等のサービスを提供している渋谷のIT企業です
https://www.mof-mof.co.jp/about
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away