うん、コンパイルレスは確かに手軽ですね。 プログラマーが複数人での開発に際してAPIドキュメントを必要とするのと同様にWebデザイナーであればスタイルガイドが必要になるでしょう。そうしないと意図した使われ方をしなかったり、変更が及ぼす影響範囲が分からなくなります。 CSSのスタイルガイドを生成するソフトウェアは幾つかありますが、通常はスタイルシートを指定してコマンドを実行し、その結果静的なHTMLを出力するものが多かったと思います。それだとWebデザイナーの方にとっては敷居が高くなってしまいます。 そこで使ってみたいのがKalei、クライアントサイドで生成するタイプのスタイルガイドです。インストールは特に不要で、Webサーバ上にKaleiを展開します。

$ git clone git://github.com/kaleistyleguide/kaleistyleguide.git
Cloning into 'kaleistyleguide'...
remote: Counting objects: 753, done.
remote: Compressing objects: 100% (451/451), done.
remote: Total 753 (delta 323), reused 694 (delta 275)
Receiving objects: 100% (753/753), 534.42 KiB | 136.00 KiB/s, done.
Resolving deltas: 100% (323/323), done.
Checking connectivity... done

これで準備は完了です（Zipファイルをダウンロードしても良いと思います）。設定ファイルを見ると、独自にスタイルシートを追加できるようになっています。ここはサイト構成に合わせて変更してください。

$ cat js/config.js 
define({
	// This css path is used as a default by the Kalei project it self.
	css_path: window.location.protocol + '//' + window.location.hostname + (window.location.port === '' ? '' : ':'+ window.location.port) + window.location.pathname +  'css/styles.css',
	// You can configure any path by just deleteing the one above and uncommenting the one below to point at your css directory
	//css_path: 'http://localhost/css/styles.css',
  // You can manually list the css files to process by giving a css_paths array
	//css_paths: ['../css/styles.css', '../css/buttons.css'],
	
	// You can optionally set configuration for marked.js
	marked_options: {
		tables: true
	}

	//disqus_shortname: 'kaleistyleguide'
});

そしてKaleiの配置してあるWebサーバにアクセスしましょう。 表示されているHTMLは全てJavaScriptで生成されています。左側のサイドバーは読み込んだスタイルシートから見出しを作り、そのスタイルシート中のスタイルガイドに従って右側のコンテンツが生成されています。 スタイルシートを一部を変更した後、再読み込みすると即座に反映されているのが分かるかと思います。コンパイルが全く不要です。なおLESSを修正しても反映されないので、LESSからCSSへの展開は別プログラムで行うのが良さそうです。 実際のスタイルシートはこのように記述されています。コメントアウトされている中にMarkdownフォーマットで記述するようです。 Kaleiを使えば修正したスタイルシートの説明がすぐに反映されますので、コンパイル忘れといった事態を防げるでしょう。なおスタイルガイドは文字が多くなりますので実際の運用時はミニファイしたファイルを使えば良いでしょう。 新規開発時は気合いが入っているのでこの手のスタイルガイドはもちろん、コンパイルも行うのですが更新が重なってくるとついつい忘れがちになってしまいます。コンパイルレスで使えるのは運用負荷を大きく下げるのではないでしょうか。 KaleiはJavaScript製のオープンソース・ソフトウェア（Public domain）です。 via えっ！ビルド不要？JavaScriptで自動生成するスタイルガイドジェネレーターKalei | バシャログ。 Kalei Styleguide - CSS Living Style guide thomasdavis/kaleistyleguide