cssを構成する上でスタイルガイドを使用すると管理がかなり楽になり
メンテナンスをする際にも役に立ちます。
今回はStyleDoccoを使用する方法(Windowsにて)を書いていきます。

StyleDoccoとは？

Node.jsを使ったスタイルガイドジェネレータです。

Node.jsのインストール

https://nodejs.org/ja/

公式サイトにあるバージョンでは動作しなかったので古いバージョンで試しました。
バージョンを切り替えられる「NVM」を インストールします。
https://github.com/coreybutler/nvm-windows/releasesからnvm-setup.zipをダウンロードし
「nvm-setup.exe」を起動します。
画面に従ってインストールします。

次にコマンドプロンプト画面で

nvm

と入力し、バージョン情報などが表示されていればOKです。

nvm install 5

と入力。node.jsのバージョンを5.0.0でインストールします。

nvm use 5

と入力。　

node -v

と入力するとnode.jsのバージョンが確認できます。
今回だと

v5.0.0

と表示されていれば成功です。

StyleDoccoのインストール

Node.jsのインストールが完了したら
再びコマンドプロンプトで

npm install -fg styledocco

と入力。

StyleDocooを作成

StyleDocco用のCSSを作成

・ディレクトリ例

Styledocco > css > styleguide.css

そこに

/*
#ボタン類

##ボタンカラー01

`.btn01`と合わせて`.btn-color01`を付与

```
<a class="btn01 btn-color01">ボタンカラー01</a>
```

##ボタンカラー02

`.btn01`と合わせて`.btn-color02`を付与

```
<a class="btn01 btn-color02">ボタンカラー01</a>
```

のようなコードと当てはまるCSSを書いてきます。

コマンドプロンプトにて作業ディレクトリに移動して以下のコマンドを入力します。

styledocco -n “Style Guide” css/styleguide.css

するとStyledoccoフォルダにdogsというフォルダが作成されます。
フォルダ内のstyle.htmlをブラウザで確認し、正しく表示されれば作成終了です。