CSSスタイルガイド作ってる？手軽に導入するならfractalがおすすめ

スタイルガイドで作るときにコメントを書くのがつらい・・。

これを思っているのって自分だけかな。

便利にするはずのスタイルガイドの運用がつらいと更新を続けるモチベーションも下がってしまう。

そんな時にコメントを問題を解消できるfractalを知ってからずっと使っているけど、やっぱりテンプレートはスタイルシートとは別の方がすっきりする。

CSSにコメントを書くスタイルガイドジェネレーター

HologramやKSSやSC5 Styleguideなど、便利なスタイルガイドジェネレーターはたくさんあるけど、cssやscss内にドキュメント用のコメントを書くのほとんど。

たとえばHologramのサンプルコードを借りるとこんな感じ。

/*doc
---
title: Buttons
name: button
category: Base CSS
---

Button styles can be applied to any element. Typically you'll want to use either a `<button>` or an `<a>` element:

// html example
<button class="btn btnDefault">Click</button>
<a class="btn btnPrimary" href="http://trulia.com">Trulia!</a>

Hologram | Generate a Styleguide right in your CSS

こんなコードをスタイルシートの先頭に書いておくとスタイルガイドが生成される。

でもこのコメント内にはテンプレートとなるHTMLも含まれていて、スタイルシート内に書くということを考えると結構大変。

スタイルシート内でテンプレートを書く時の補完

HTMLを書く人ならEmmetなり、コーディングスピードをあげるツールを使っていると思う。

ただCSSのコメント内ではHTMLの入力補完が使えず、そんな状況でテンプレートを書くのがつらすぎる・・。

インデントなんかもエディタの整形ではなく手作業で整えるのも苦行でしかない。

確かにスタイルシート内にテンプレートも書かれていたほうが、一元管理されていてわかりやすいかもしれない。

だけどHTMLを書く点においてはテンプレートはやっぱりスタイルシートとは別ファイルに書きたいという気持ちが大きい。

HTMLなり他のテンプレート系の拡張子のファイルならば、補完が効かないということもなく、インデントもエディタで簡単に整形ができる。

そんな要件を叶えられるfractalはテンプレートを別にしたい人には、もってこいのスタイルガイドジェネレーターだと思う。

既存コードに影響を与えずスタイルガイドを生成する

「スタイルガイドは取り入れやすく捨てやすくが大切」で書いたようにスタイルガイドは捨てやすいことも大切な要素のひとつ。

実装のコードとスタイルガイド生成のコメントがひとつのファイルで書かれていると、スタイルガイドがいらなくなった場合、不要なコメントがスタイルシート内に残ることとなる。

そもそもスタイルガイドを捨てることも前提にするなら作るなという話になりそうだけど、上記関連記事でも書いたようにやっぱり運用を始めたら続かないということは十分に考えられる。

これは実際に身をもって体験している・・。

既存コードに影響を与えずにスタイルガイドを生成できる点においてfractalは他のジェネレーターにはない優位性がある。

現状でfractalは一番お試しで始めるにはよいスタイルガイドジェネレーターだと思っています！