KSS はスタイルガイドジェネレータです。
Github の中の人、Kyle Neath 氏を中心に開発されていて、Github 自体にも使われています。

普段は SCSS で使っていますが、CSS, SCSS, LESS といった形式に対応しているそうです。

KSS · Knyle Style Sheets
http://warpspire.com/kss/

Ruby 製のツールで Rails や Sinatra に組み込んで使用します。
そして Github のリポジトリには Sinatra で動かす場合のサンプルも含まれています。

kss/example at master · kneath/kss · GitHub
https://github.com/kneath/kss/tree/master/example

上記サンプルの views ディレクトリを見てもわかるように view の部分も自分達でゴリゴリ書いていく仕組みになっていて、そういうのが使える多少の知識か、そういうのが得意なチームメンバーが必要になってきたりしますが、これは良いものです。

スタイルガイド

スタイルガイドっていうのは CSS で作ったスタイルを一覧して確認出来るようにした一種のドキュメントで、例えば下に URL を載せた、 Github が公開しているスタイルガイドではボタン用のスタイル一覧を始め、フォームやテキストなどのカテゴリに分類された様々なスタイリングのサンプルコードと実際のレンダリング例を見られるようになっています。

Buttons · Styleguide
https://github.com/styleguide/css/1.0

こういったドキュメントを生成するツールがスタイルガイドジェネレータです。

Doc コメント記法

公式サイトの例をそのまま持ってきていますがこんなコメントを記述することでスタイルガイドジェネレータはこれを解釈してドキュメントとして展開してくれます。

// A button suitable for giving stars to someone.
//
// :hover             - Subtle hover highlight.
// .stars-given       - A highlight indicating you've already given a star.
// .stars-given:hover - Subtle hover highlight on top of stars-given styling.
// .disabled          - Dims the button to indicate it cannot be used.
//
// Styleguide 2.1.3.
a.button.star{
  ...
  &.star-given{
    ...
  }
  &.disabled{
    ...
  }
}

JavaScript でも同様に JSDoc や YUIDoc というものがあるのですが、この手のものは規定の書式に従ってコメントを記述することで、それらをドキュメントとして展開する機能を持っています。生成されたドキュメントを見た方が綺麗ではありますが、ソースコード中のコメントとしても普通に役立つのでドキュメント生成ツールを採用していなくても、とりあえずコメントの書式だけ採用しておくのも細かい書き方のルールやなんかで悩まなくて済みます。

このコメント例のそれぞれの箇所は以下のような役割を持っています。

// {このスタイルの説明}
//
// :hover             - {疑似クラスの説明}
// .stars-given       - {複数クラスの and 指定時の説明}
//
// Styleguide {スタイルガイドのセクション番号}
a.button.star{
  ...
  &.star-given{
    ...
  }
  &.disabled{
    ...
  }
}

:hover とか .stars-given の箇所のように、そのスタイルから派生する状態のスタイルも定義してある場合はこれを上記例のように書いておくことで、それぞれの状態の見た目もドキュメントのプレビューエリアに表示してくれます。

この URL にあるボタンの例でそれが確認できると思います。

Buttons · Styleguide
https://github.com/styleguide/css/1.0

そしてセクション番号と書いた箇所、この呼び方は勝手な意訳なのですが、この箇所にはそのスタイルを指し示す目録番号みたいなものを付けてやります。上の URL でも一番上のボタンのスタイルに 1.1 という番号が振られているのが見てとれると思います。

ピリオド区切りの数字を使うというルールの他、文章の章立てのように階層構造を持った分類に整理するべきみたいな指針があって、例えばボタンのスタイルなら以下のような感じにします。

1. ボタン
  1.1 フォーム用ボタン
    1.1.1 汎用的なフォーム用ボタン
    1.1.2 特殊なフォーム用ボタン
  1.2 ソーシャルボタン

その他の役割として、Sinatra とかの view にサンプルコードを書いておくとそれが実際にレンダリングされてドキュメントにも出現するんですけど、それを書く際に、このサンプルコードはこのスタイルのサンプルコードだよっていうのを示すときに使う番号でもあります。

下の URL にあるように、ここで紹介した以外にも様々な構文を使うことができます。

KSS · Knyle Style Sheets
http://warpspire.com/kss/syntax/

スタイルガイドジェネレータ色々

そんなスタイルガイドジェネレータ、他にもあります。KSS の他には StyleDocco というものが最近は有名かな、と思っています。

StyleDocco
http://jacobrask.github.com/styledocco/

これは Node.js 製で、CLI 環境 (Mac のターミナルや Windows のコマンドプロンプト) からコマンドを実行するとスタイルガイドが静的な HTML ファイルとして書き出されます。

こちらは cd コマンドを知っているくらいであれば、それとなく扱うことは出来るので間口は KSS よりもずっと広いものになっています。ですが、KSS の StyleDocco に無い魅力としてサーバー起動が出来るというのがあって、KSS の方が好みに合うようになりました。

KSS はサーバーとして実行できる

http://localhost:4567/ にアクセスしたら見れるっていうあれです。Rails, Sinatra に組み込むっていう時点で当然こういう風になるんですが。

先に知ったのは StyleDocco なんですけど、サーバーモードが無いことに気付いてサーバーモード付きのスタイルガイドジェネレータを探していたらやっと KSS に行き着いたっていうくらいにはこの機能を求めていました。

なんでそれが欲しいのかっていうと、バージョン管理している複数人の関わるプロジェクトにおいて、元ファイルの編集に応じて自動生成されるっていう仕組みのファイルが大量にあると、コミットされるファイルが遠目に見てなんかすごい大量に見えてしまう。そして、「元ファイル → 生成ファイル」という関係の2つは差分を表す情報としてはダブった存在であり、変更を知るには元ファイルの変更情報だけあればよくて、ここがダブってると後から差分を見た際に状況をとても把握し辛いためです。

その他、生成される環境の違いでなんか文字コードが変わってたり改行コードが変わってたりして全ての行に変更があったことにされてしまうみたいなケースも考えられるので、こういう関係性において自動生成される側のファイルはあまりコミットしたくなくて、サーバー上で状況に応じて元ファイルをうまく展開してくれる手段があればなるべくそちらの方法を採りたいと思っています。

これは、「CoffeeScript → JavaScript」とか「Sass → CSS」の関係においても同様です。

どちらを使うか

最近フロントエンド云々と呼ばれている領域で仕事をしている身からして、StyleDocco の方が圧倒的に導入敷居としては低いです。ちょっと CLI 環境に手慣れたメンバーが居ればすぐにツールの動作を試して見せるくらいはできるんじゃないかと。また、StyleDocco で書き出された静的な HTML によるドキュメントは、Ruby とか Node の環境が無くても普通にブラウザで開くことができるし、プレビューサーバへそのままアップするという用途にも使えます。

一方 KSS はそもそも Ruby を使ったプロジェクトでないと使えないというか、無理矢理に使えなくはないでしょうけども。という感じです。

自分の場合は上に書いた理由から、Ruby 使えるとかわかんないこと聞ける人が居るとか色々の状況が整っていれば KSS を選びたいという気持ちでいます。その辺り、Ruby 使うのが普通の環境で、Ruby 書いてるやつは大体友達っていう状況なら自然に手が伸びるのは KSS ではないかと思います。ただ、CSS、スタイルの設計みたいなのをドキュメントにできるほど綺麗に行い、そしてドキュメントに落とし込むにはデザインの心得があって HTML や CSS もすごい書いてきたとかそういう適正を持っているみたいな人が居ると捗ってよいだろうなぁと思いました。