styleguide.jsはnode/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Webコーディングを行う際に複数人で作業する場合はスタイルシートのクラスをどのように使うべきか記す必要があるかと思います。そんな時に使ってみたいのがstyleguide.jsです。

[![](http://images.moongift.jp/2013/10/Screenshot 2013-10-15 12.08.27_thumb.1382078216.png)](http://images.moongift.jp/2013/10/Screenshot 2013-10-15 12.08.27.1382078216.png)
デモです。このHTMLファイルは自動生成されたものになります。

[![](http://images.moongift.jp/2013/10/Screenshot 2013-10-15 12.08.35_thumb.1382078220.png)](http://images.moongift.jp/2013/10/Screenshot 2013-10-15 12.08.35.1382078220.png)
セクションごとの見出し付き。

styleguide.jsはルールとしてスタイルシートファイルの中にコメントでデモ用のHTMLを記述します。説明などはYAML形式で記述するようになっており、スタイルシート全体に説明を付与しておくのは分かりやすいのではないでしょうか。

実際のコードとドキュメントが分離することによる弊害はプログラマーの方であればよく知るところでしょう。そのためコードの中に○○Docと呼ばれる形で記述するスタイルが多いです。スタイルシートでも同様の作業はできるはずです。

最初は整合性のとれているスタイルシートも更新が重なると次第につきはぎだらけになって設定がどこで使われているか把握しきれなくなっていきます。その結果、修正は行わず常に追加するといった形になるのはよくあることです。そうならないためにも体系化されたドキュメントは用意すべきでしょう。

EightMedia/styleguide.js