【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました
これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。
乗り換えた理由
以前からaigisの存在は知っていたのですが、私はFrontnoteを使っていました。
理由は単純で、Frontnoteだと導入が楽だったからです。
スタイルガイドジェネレーターを探していた当時aigisを導入してみたのですが、私は上手くできなかったので泣く泣く諦めて,Frontnoteを使うことにしました。
Frontnoteは今でも使いやすいスタイルガイドジェネレーターだと思うのですが、カスタマイズが私にとってはしにくくて自分の作りたい形での出力ができなかったので、使ってるうちに自分の要望が増えてきてしまったので、この度aigisに乗り換えました。
現在もaigisはバージョンアップが進められており、導入もしやすくなったと聞いたのも乗り換えのきっかけです。
サンプルとかもちゃんと用意されています。嬉しい事に日本語版のドキュメントもあります。
aigisの良いところ
aigisを導入してみて良かったと思うところはjadeが使えるところです。
jadeで書くとこんな感じでかけるので、cssのclassがコピペしやすくてドキュメントを書く負担が減るところです。
```jade
.c-btn
a ボタンの名称だよ
```
※こんな感じに書くとスタイルガイド内にHTMLが生成されます。
他にも、スタイルガイドのテンプレートが自分用にカスタマイズし易いところも気に入っています。
スタイルガイドのテンプレートはjadeベースで使えるものがあってレイアウトや色など自分のCSSで簡単に変更できるので拡張性が高いという印象です。
外部JSも簡単に入れれます。
aigisの使い方
node.jsとgulpを使える環境があればすぐお試しいただけるようにサンプルを作りました。
よかったら使って見てください。
サンプル
サンプルの使い方
ターミナルを開いて、下記コマンドを入力してください。
npm install
gulp aigis
これをすると「styleguide」ってディレクトリができていると思うのでその中にあるindex.htmlにアクセスするとスタイルガイドが出来上がってるかと思います。
スタイルガイドについて
スタイルガイドは作って終わりじゃありません。
作り続ける事が大事です。
よく「CSSなんですぐ死んでしまうん」と言った声を現場で良く聞くのですがそれは情報の共有がされていない事と適切なCSSの設計ができていないからと思います。
私はスタイルガイドを作り始めてCSSの設計をちゃんと考える時間を作るようになりました。
世の中ではBEMやFLCSSが良い風潮を感じますが、個人的にはBEMやFLCSSを使うだけでは、活きの良いCSSは書けないかなと思っています。
絶対にコレといったCSS設計はないと思っていますが、スタイルガイドに合わせてCSSを設計するとそれなりに良い感じの設計になるのでは無いのでしょうか。少なくとも何もない状態のオレオレコーディングよりは使いやすいと思います。
CSSを書くプロの人はたくさんいると思いますが、CSSを設計できるプロはそれほど見たことがありません。
私はスタイルガイドを通じて納品のためのCSSではなくプロジェクト運用のためのCSSを書ける人材になろうかなと思う次第です。
今後はなるべく業務と関係ない自分のプロジェクトはgithubに公開して、一緒にスタイルガイドも公開していきたいなーと思ってます(*ゝω・*)