既存のHTMLからID/クラスを抜き出してCSSを生成「extractCSS」
extractCSSはJavaScript製のオープンソース・ソフトウェア(MIT License)です。
スタイルシートの記述法は幾つかあります。linkタグで外部ファイル化、styleタグでインラインに表示、そしてstyle要素でタグごとに指定する方法です。styleタグに書き込まれてしまったスタイル設定を一気に書き出してくれるのがextractCSSです。
[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 9.59.03_thumb.1377563750.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 9.59.03.1377563750.png)
トップページです。まず右側に現状のHTMLソースを入力します。
[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 9.59.15_thumb.1377563754.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 9.59.15.1377563754.png)
そしてExtractボタンを押すとスタイルシートが出力されます。
[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 9.59.53_thumb.1377563758.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-26 9.59.53.1377563758.png)
入れ子向上も適切に処理されています。
extractCSSではID/クラスを自動的にピックアップして生成していますので空っぽの指定が相当数生成されることになると思います。それらを必要に応じてフィルタリングするようにすればスタイルシートのベースとして使えるのではないでしょうか。
MOONGIFTはこう見る
extractCSSはコンテンツの構造からデザインを考える際に使えるかも知れません。SEO的にも奇麗なHTML構造になっていることは優位性があります。HTML構造だけをばしっと決めて、後からデザインを考えていくという方法です。
また既存のWebサイトを運営していく中で出来てしまったスタイル要素を書き出してまとめていくのにも向いていそうです。使う場面は限られそうですが覚えておくと便利そうです。