{"action":"created","issue":{"url":"https://api.github.com/repos/shikakun/tips/issues/72","labels_url":"https://api.github.com/repos/shikakun/tips/issues/72/labels{/name}","comments_url":"https://api.github.com/repos/shikakun/tips/issues/72/comments","events_url":"https://api.github.com/repos/shikakun/tips/issues/72/events","html_url":"https://github.com/shikakun/tips/issues/72","id":53360887,"number":72,"title":"スタイルガイドについて調べた","user":{"login":"shikakun","id":1396953,"avatar_url":"https://avatars.githubusercontent.com/u/1396953?v=3","gravatar_id":"","url":"https://api.github.com/users/shikakun","html_url":"https://github.com/shikakun","followers_url":"https://api.github.com/users/shikakun/followers","following_url":"https://api.github.com/users/shikakun/following{/other_user}","gists_url":"https://api.github.com/users/shikakun/gists{/gist_id}","starred_url":"https://api.github.com/users/shikakun/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shikakun/subscriptions","organizations_url":"https://api.github.com/users/shikakun/orgs","repos_url":"https://api.github.com/users/shikakun/repos","events_url":"https://api.github.com/users/shikakun/events{/privacy}","received_events_url":"https://api.github.com/users/shikakun/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/shikakun/tips/labels/CSS","name":"CSS","color":"207de5"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-01-05T03:26:17Z","updated_at":"2015-01-20T06:00:19Z","closed_at":null,"body":"CSS ファイルからスタイルガイドを生成して、いろんな人がプロジェクトに関わっても CSS が壊れないようにしたいなと思った。でも、いままでそういうことやったことないので調べてみました。調べてみました、とかいいつつ、それぞれ CodeGrid の有料記事の解説を読んで知識を得ました。\r\n\r\n----\r\n\r\n# KSS\r\n\r\nhttps://app.codegrid.net/entry/kss-1\r\nhttps://github.com/pxgrid/codegrid-kss\r\n\r\n#### メリット\r\n\r\n* ドキュメントのスタイルの自由度が高い。マークアップも自由。\r\n* コメントの記入のフォーマットが厳しく決まっているので、誰が書いても同じようになる。\r\n\r\n#### デメリット\r\n\r\n* ドキュメントを動的に生成するので読みたいときはサーバーを起動する必要がある。\r\n* スタイルガイドと HTML 例が別のファイルに書かれているので、更新するのが大変そう。\r\n* コメントの書式を学習しないと CSS 書けなくなるのは大変そう。\r\n* スタイルごとに番号ふるの大変そう。\r\n* grunt-styleguide が対応してる CSS プリプロセッサーが less のみ。\r\n  * https://github.com/indieisaconcept/grunt-styleguide\r\n\r\n# StyleDocco\r\n\r\nhttps://app.codegrid.net/entry/styledocco-1\r\nhttps://github.com/pxgrid/codegrid-2013-styledocco\r\n\r\n#### メリット\r\n\r\n* コメントを Markdown だけで書ける。Markdown なら誰でも慣れてそう。\r\n* grunt-styleguide が対応していて grunt を使用したプロジェクトに導入しやすい。\r\n  * sass にも対応してる。\r\n\r\n#### デメリット\r\n\r\n* ひとつの CSS ファイルから複数のスタイルガイドのページを作ることや、複数の CSS ファイルからひとつのスタイルガイドのページを作ることはできない。\r\n  * スタイルガイドのために CSS ファイルの構成を考えるっていう本末転倒な感じになっちゃう。\r\n* デフォルトのドキュメントの見た目が微妙だなぁ。\r\n\r\n# hologram\r\n\r\nhttps://app.codegrid.net/entry/hologram-1\r\nhttps://github.com/codegrid/hologram\r\n\r\n#### メリット\r\n\r\n* ドキュメントを静的ファイルに書き出してくれるのでサーバーを起動しなくても読める。\r\n* ドキュメントのスタイルやマークアップの自由度が高い。\r\n  * 検索機能を勝手に作ったりプラグインを開発してる人もいる。\r\n\r\n#### デメリット\r\n\r\n* grunt-styleguide が対応してない。\r\n* コメントが YAML と Markdown をあわせた独特な書式なので覚えるのめんどくさそう。\r\n\r\n----\r\n\r\nなるほど〜。\r\nとりあえず hologram 試してみようかなぁ。"},"comment":{"url":"https://api.github.com/repos/shikakun/tips/issues/comments/70608501","html_url":"https://github.com/shikakun/tips/issues/72#issuecomment-70608501","issue_url":"https://api.github.com/repos/shikakun/tips/issues/72","id":70608501,"user":{"login":"shikakun","id":1396953,"avatar_url":"https://avatars.githubusercontent.com/u/1396953?v=3","gravatar_id":"","url":"https://api.github.com/users/shikakun","html_url":"https://github.com/shikakun","followers_url":"https://api.github.com/users/shikakun/followers","following_url":"https://api.github.com/users/shikakun/following{/other_user}","gists_url":"https://api.github.com/users/shikakun/gists{/gist_id}","starred_url":"https://api.github.com/users/shikakun/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shikakun/subscriptions","organizations_url":"https://api.github.com/users/shikakun/orgs","repos_url":"https://api.github.com/users/shikakun/repos","events_url":"https://api.github.com/users/shikakun/events{/privacy}","received_events_url":"https://api.github.com/users/shikakun/received_events","type":"User","site_admin":false},"created_at":"2015-01-20T06:00:19Z","updated_at":"2015-01-20T06:00:19Z","body":"このあと hologram 実際に使ってみて最高だなと思って、使い方とサンプルコードをまとめたリポジトリを作ったので、よろしければご覧ください。\r\n* https://github.com/shikakun/styleguide"}}