albatrosary's blog

UI/UXとエンタープライズシステム

CSS に対する継続的インテグレーションについて

HTML5の膨大な CSS をどうやってメンテナンスするか  

 

jsCafe に参加する機会があり、styledocco についてお話が聞けましたのでまとめます。HTML5 になり CSS の役割が多くなったことは言うまでもありません。膨大な CSS をどうやってメンテナンスするかが課題です。その回答がここにあります。

 

styledecoo とは?

styledecco についてはサイトを確認するのが良いです。このツールはサイトからの言葉を参考にすると、次のことをしてくれます。

〜 StyleDoccoはスタイルシートからの文書とスタイルガイドのドキュメントを生成します 〜

普段、CSS用の確認画面を別途作成していましたので使いたいと思います。

 

jsCafe では次のように説明されていました。

nodejs製のCSSスタイルガイド作成ユーティリティです。CSS ァイルやプリプロセッサ用ファイル(SASS, LESS, Stylus, などなど)に Markdown でドキュメントを埋め込むことができます。

  • CSSファイルにコメントを残すことで再利用しやすい
  • Compassは簡単に導入できる
  • :hover や :focus などのスタイル確認が容易
  • Markdown で書くだけなので追加・更新が楽
  • JavaScript で UI を生成して言う場合の確認にも使える

というのが特徴です。

grunt プラグイン

grunt プラグインが存在していますので導入は容易です。

grunt-styledocco

StyleDocco styleguide generator for grunt.

grunt-styleguide

Universal CSS styleguide generator for grunt. Easily integrate Styledocco or KSS styleguide generation into your development workflow.

まとめ

作成した CSS の確認が大変だったのですが styledecco を利用することで作業効率が上がると考えています。特に下記事項については良いと考えています。 

  • CSS のスタイルガイドが作れる
  • CSS 記述の重複を防げそう