Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

スタイルガイドについて調べた #72

Open
shikakun opened this issue Jan 5, 2015 · 1 comment

Comments

Projects
None yet
1 participant
@shikakun
Copy link
Owner

commented Jan 5, 2015

CSS ファイルからスタイルガイドを生成して、いろんな人がプロジェクトに関わっても CSS が壊れないようにしたいなと思った。でも、いままでそういうことやったことないので調べてみました。調べてみました、とかいいつつ、それぞれ CodeGrid の有料記事の解説を読んで知識を得ました。


KSS

https://app.codegrid.net/entry/kss-1
https://github.com/pxgrid/codegrid-kss

メリット

  • ドキュメントのスタイルの自由度が高い。マークアップも自由。
  • コメントの記入のフォーマットが厳しく決まっているので、誰が書いても同じようになる。

デメリット

  • ドキュメントを動的に生成するので読みたいときはサーバーを起動する必要がある。
  • スタイルガイドと HTML 例が別のファイルに書かれているので、更新するのが大変そう。
  • コメントの書式を学習しないと CSS 書けなくなるのは大変そう。
  • スタイルごとに番号ふるの大変そう。
  • grunt-styleguide が対応してる CSS プリプロセッサーが less のみ。

StyleDocco

https://app.codegrid.net/entry/styledocco-1
https://github.com/pxgrid/codegrid-2013-styledocco

メリット

  • コメントを Markdown だけで書ける。Markdown なら誰でも慣れてそう。
  • grunt-styleguide が対応していて grunt を使用したプロジェクトに導入しやすい。
    • sass にも対応してる。

デメリット

  • ひとつの CSS ファイルから複数のスタイルガイドのページを作ることや、複数の CSS ファイルからひとつのスタイルガイドのページを作ることはできない。
    • スタイルガイドのために CSS ファイルの構成を考えるっていう本末転倒な感じになっちゃう。
  • デフォルトのドキュメントの見た目が微妙だなぁ。

hologram

https://app.codegrid.net/entry/hologram-1
https://github.com/codegrid/hologram

メリット

  • ドキュメントを静的ファイルに書き出してくれるのでサーバーを起動しなくても読める。
  • ドキュメントのスタイルやマークアップの自由度が高い。
    • 検索機能を勝手に作ったりプラグインを開発してる人もいる。

デメリット

  • grunt-styleguide が対応してない。
  • コメントが YAML と Markdown をあわせた独特な書式なので覚えるのめんどくさそう。

なるほど〜。
とりあえず hologram 試してみようかなぁ。

@shikakun shikakun added the CSS label Jan 5, 2015

@shikakun

This comment has been minimized.

Copy link
Owner Author

commented Jan 20, 2015

このあと hologram 実際に使ってみて最高だなと思って、使い方とサンプルコードをまとめたリポジトリを作ったので、よろしければご覧ください。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.