スタイルガイドを作ろう[kalei編]

そもそもスタイルガイドとは

• サイトに定義されているスタイルの一覧やコーディング規約ドキュメント化したもの
• マークダウン記法でコメントを書くと、いい感じに自動生成してくれるツールがいくつかある。

スタイルガイドを作るメリット

• 「あれのクラス名なんだっけなー」とか「このサイト、他にどんなクラス作ってたっけな―」ってときにいちいちCSS全部読んだり探さなくていい。
• CSSの設計でイケてないところを発見できる。
  （命名規則のルールが崩壊してる、同じデザインなのに他の箇所で再利用ができないクラスの発見など）

スタイルガイドのツール

• KSS · Knyle Style Sheets
  Ruby上で動く。
  Github 自体にも使わてるのがこれ。
  サーバーモード付き。
• StyleDocco
  node.jsが必要。敷居はKSSより低く、cd コマンドくらいを知っていれば、なんとかなる。
  ※ただ、最近（2014年4月現在）のChromeでみるとプレビュー機能がうまくきいてないみたい。詳しくは下記参照
  StyledoccoがChromeでiframe部分見えねーよ!という場合の当座の解決法
• [Kalei Styleguide] (http://kaleistyleguide.com/)
  RubyとかNode.jsとかいらないので、環境を整えなくても結構だれでも使える。
  ただscssは対応していない(lessは対応)。

kaleiでスタイルガイドを作る

1.githubからファイルをゲットする。
2.サーバにあげて確認。うまく動いてたらOK
3.css/styles.css　をいじる。
styles.cssがスタイルガイドのトップ画面になる。

ファイル名変えたかったらjs/viws/config.js に書かれているstyle.cssの箇所を変更。

新しくCSSを追加したい場合は@importでファイルを読み込むだけで左メニューに追加される。
（ちなみに、相対パスで違う階層のやつを読み込むと左メニューのフォントが赤色になる。）
下記2つはスタイルガイドのデザイン用に必要。

@import url("theme.css");
@import url("highlight/styles/googlecode.css");

CSSはimportしてもいいしコメント外に直書きしてもOK
（何か理由が無い限りは、直書きするより開発用の環境にぶちこんで、該当のCSSを相対パスで設定した方がいいと思うけど）
ドキュメントはコメント内（/* ～ */）にマークダウン記法でかいていく。

仮画像を置きたい場合は PLACEHOLD.ITを使うと、サイズも分って便利。

例：

<img src="http://placehold.it/350x150">

また、左メニューの表示が気に入らない場合はtemplates/style/menu.html を修正。
個人的には、theme.css　とかは表示したくないのでここで無理やり消したり。

スタイルガイド作成での注意

というよりはそもそものCSSの書き方の話。
スタイルガイド作成の上で過度な親要素からの指定がしてあると面倒。

body #main .nav li a {
　　color: #333;
}

流石にbodyからの指定は無いにしても、
あまり親要素で指定すると他での流用がしづらかったり、
その分CSSファイルも重くなるので、
なるべくクラス名を付けて短く指定してあげるようにするべきかと...

スタイルガイドを作ってみるとモジュールについても色々考えさせられるので、(順序としては逆だけど)プロジェクトと同時進行で作っていくといいかも。（余裕があればの話だけど。）

たまに命名規則で英語のスペル違いや、わかりづらいクラス名、足りない要素とか出てきたりするから。