スタイルガイドジェネレータを自作した

Cheatahというスタイルガイドジェネレータを作った。

スタイルガイドというのはスタイルシートの仕様書みたいなもので、HTMLにどのようなclass属性（またはid）を書くとどのようなスタイルが適用されるのかが書かれているもの。例えば、GitHubのStyleGuideやTwitter BootstrapのCSSのページがそれにあたる。そして、スタイルガイドジェネレータというのは、スタイルガイドを自動生成してくれるもので、StyleDoccoやKSSが有名。

Cheatah

Cheatahの特徴は、既存のスタイルガイドジェネレータよりも気軽にスタイルガイドを作れることである。

StyleDoccoやKSS使う際、スタイルガイドとして作りたいHTMLをCSS（もしくはプリプロセッサ）にコメントとして記述しなければいけない。 Cheatahではそのようなコメントを一切書かずにスタイルガイドを生成できる。 使い方はGitHubリポジトリのREADMEに書いてある。

開発者同士の円滑なコミュニケーションのためにスタイルガイドは作りたいが、いちいち丁寧にコメント書くのはめんどくさいし、簡単なものでいいからもっとカジュアルに作りたいというモチベーションからCheatahは作られた。

しかしCheatahでは、colorやborder-radius、font-familyなどの装飾を施すプロパティを含むルールセットのガイドしか生成できない。 marginやfloatなどのレイアウトのためのプロパティは、HTMLの構造に依存するので、StyleDoccoのようにコメントでHTML（Markdown）を書いてやらないといけない。 今はこの点をどうにか解決できないかと模索している。

スタイルガイド

上述したように、スタイルガイドは開発者の円滑なコミュニケーションのために必須だと思っている。 特にCSSを書く人が複数人いるような場合だと、誰がどんなルールセットをどのように定義しているのかを共有する必要がある。何も考えずに各々がそのページで必要なスタイルを独自に定義していくと、冗長で再利用性が低く、CSSファイルの容量は膨れ上がりロードに時間がかかる。

またCheatahでは、そのルールセットがどのように書かれているのかを確認することもできるので、開発者同士でCSSのコードのレビューをすることもできる。

CSSは、ただWebのビジュアルデザインを表現できれば良いというものではなく、他のプログラミング言語と同様に保守の対象であるべきである。 その後のメンテナンスを助けるという意味でも、スタイルガイドは作るべきだと思う。