スタイルガイドについて調べた

[shikakun]

CSS ファイルからスタイルガイドを生成して、いろんな人がプロジェクトに関わっても CSS が壊れないようにしたいなと思った。でも、いままでそういうことやったことないので調べてみました。調べてみました、とかいいつつ、それぞれ CodeGrid の有料記事の解説を読んで知識を得ました。

---

KSS

https://app.codegrid.net/entry/kss-1
https://github.com/pxgrid/codegrid-kss

メリット

• ドキュメントのスタイルの自由度が高い。マークアップも自由。
• コメントの記入のフォーマットが厳しく決まっているので、誰が書いても同じようになる。

デメリット

• ドキュメントを動的に生成するので読みたいときはサーバーを起動する必要がある。
• スタイルガイドと HTML 例が別のファイルに書かれているので、更新するのが大変そう。
• コメントの書式を学習しないと CSS 書けなくなるのは大変そう。
• スタイルごとに番号ふるの大変そう。
• grunt-styleguide が対応してる CSS プリプロセッサーが less のみ。
  • https://github.com/indieisaconcept/grunt-styleguide

StyleDocco

https://app.codegrid.net/entry/styledocco-1
https://github.com/pxgrid/codegrid-2013-styledocco

メリット

• コメントを Markdown だけで書ける。Markdown なら誰でも慣れてそう。
• grunt-styleguide が対応していて grunt を使用したプロジェクトに導入しやすい。
  • sass にも対応してる。

デメリット

• ひとつの CSS ファイルから複数のスタイルガイドのページを作ることや、複数の CSS ファイルからひとつのスタイルガイドのページを作ることはできない。
  • スタイルガイドのために CSS ファイルの構成を考えるっていう本末転倒な感じになっちゃう。
• デフォルトのドキュメントの見た目が微妙だなぁ。

hologram

https://app.codegrid.net/entry/hologram-1
https://github.com/codegrid/hologram

メリット

• ドキュメントを静的ファイルに書き出してくれるのでサーバーを起動しなくても読める。
• ドキュメントのスタイルやマークアップの自由度が高い。
  • 検索機能を勝手に作ったりプラグインを開発してる人もいる。

デメリット

• grunt-styleguide が対応してない。
• コメントが YAML と Markdown をあわせた独特な書式なので覚えるのめんどくさそう。

---

なるほど〜。
とりあえず hologram 試してみようかなぁ。

[shikakun]

このあと hologram 実際に使ってみて最高だなと思って、使い方とサンプルコードをまとめたリポジトリを作ったので、よろしければご覧ください。

• https://github.com/shikakun/styleguide