What is a Style Guide?

32f242f75b63e7174b493446de54a6b8?s=47 Yuya Saito
October 21, 2012

What is a Style Guide?

ウェブにはもともと従来のメディアよりも“早い”開発が可能であるという特性があります。その特性はこの数年で飛躍的な進化を遂げてきています。よりよいプロダクトを作る上で必須なイテレーションの土台となるのがスタイルガイドというワークフローではないでしょうか?

今回は自信を持ってイテレーションを回すために知っておきたいスタイルガイドについて紹介します。

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

October 21, 2012
Tweet

Transcript

  1. - 2012.11.10 / Yuya Saito - What is Style guide?

    υΩϡϝϯςʔγϣϯ ίʔσΟϯάͷ඼࣭Λอͭ ελΠϧΨΠυ ͷ࡞Γํ
  2. L CSSRadar Yuya Saito

  3. (Ex) Web Designer Front-END Developer I am @ CyberAgent

  4. -Agenda- What is Style Guide? 1. Benefits of 2.Style Guide

    Creating Style Guide 3.
  5. ?

  6. New Guys Come 2 Launch Site 1 Broken Site 3

  7. YOU Are! ! New Guys ⚠

  8. ελΠϧΨΠυ͸ ͦΜͳࠞཚΛ ܰݮ͢Δ υΩϡϝϯτ

  9. What is Style Guide? 1.

  10. Identity Guide

  11. www.gov.uk/designprinciples

  12. Comprehensive GuideLine

  13. www.bbc.co.uk/gel/

  14. Coding Standard

  15. github.com/rwldrn/idiomatic.js

  16. github.com/necolas/idiomatic-css

  17. Style Guide? So What is ໨త͸ ڞ௨ݴޠΛ ੜΈग़͢͜ͱ u

  18. ڞ௨ݴޠ ≊ ίϛϡχέʔγϣϯ

  19. Documentation isBoring So Make it Fun!

  20. Benefits of 2.Style Guide

  21. αΠτશମͰ ར༻͍ͯ͠Δ શͯͷ ίϯϙʔωϯτ ΛϖʔδͰ දࣔ͢Δ υΩϡϝϯτ

  22. DEVELOPING/DESIGN Documentation 8F

  23. 3 DEVELOPING/DESIGN Documentation 8F

  24. Live & Automatic Live Automatic

  25. No Documentation!? Wrong Documentation!?

  26. Live & Automatic can solve them Say No More

  27. kStyle Guide Makes CSS Testable

  28. FFFFFFFFF FFFFFFFF X FStyle Guide is One Page Documentation

  29. CSS CascadeS

  30. rStyle Guide Helps develop with OOCSS

  31. OOCSS?

  32. github.com/stubbornella/oocss

  33. smacss.com

  34. blog.millermedeiros.com/solid-css/

  35. OOCSS: ମܥཱͬͨ਺গͳ͍ $44։ൃ΁ͷΞϓϩʔν

  36. X X X

  37. Ͳ͏΍ͬͯϕʔεΦϒδΣΫτΛ ઃܭ͢Δͷ͔ʁ ?

  38. Ernest Hemingway Said: The first draft of anything is shit.

    ղܾ ͱʹ͔͘࡞ͬͯ͠·͏
  39. RefactorAble Make CSS

  40. LStyle Guide Creates Shared Vocabulary

  41. ίϛϡχέʔγϣϯͱ͸ ͓ޓ͍ͷڞ௨ೝࣝΛ ݶΓͳ͘ଟ͘࡞Δ͜ͱ υΩϡϝϯςʔγϣϯ͸ ͦͷڞ௨ೝࣝΛ ੜΈग़ͨ͢Ίͷπʔϧ

  42. DStyle Guide Forces Writing Comments

  43. © 2012, O'Reilly Media, Inc. Write Good Comment

  44. ࣗಈͰ ͦͷίϝϯτ͔Β ελΠϧΨΠυ͸ )5.-Λੜ੒

  45. Examples

  46. github.com/styleguide

  47. www.starbucks.com/static/reference/styleguide/

  48. flic.kr/p/9v2Pgx

  49. Not Just Examples Read the Code

  50. Creating Style Guide 3.

  51. BY Jacob Rask StyleDocco  github.com/jacobrask/styledocco

  52. BY Kyle Neath KSS  github.com/kneath/kss

  53. StyleDocco CUI

  54. Install StyleDocco

  55. sudo npm install -fg styledocco

  56. styledocco <Φϓγϣϯ><ελΠϧγʔτσΟϨΫτϦ> Usage:

  57. styledocco assets/style

  58. http://d.pr/cV2N

  59. None
  60. None
  61. github.com/studiomohawk/demo-styleguide

  62. /* # ϒϩοΫ໊͜͜ʹϘλϯɺφϏήʔγϣϯͳͲελΠϧ͕ԿΛ͍ͯ͠Δ͔Λ ؆ܿʹઆ໌͍ͯͩ͘͠͞ɻ Ұߦۭ͚ͯɺͪ͜Β͸ϒϩοΫͷઆ໌จͰ͢ɻ ελΠϧཁૉͷ໾ׂ΍ৼΔ෣͍Λઆ໌͢Δ৔ॴͰ͢ɻ ͕͜͜࢓༷ॻʹ͋ͨΔ෦෼ʹͳΓ·͢ɻ ίϝϯτϒϩοΫ಺͸NBSLEPXOͱ͍͏ܗࣜͰهड़͠·͢ɻ ``` ྫࣔ͞ΕΔ)5.-͸͜ͷόοΫςΟοΫΛճ܁Γฦͨ͠ϒϩοΫ಺ʹ

    هड़͠·͢ɻ ٙࣅཁૉΛදࣔ͢Δ৔߹͸Ϋϥε໊ͱͯ͠AIPWFSAɺABDUJWFAͳͲίϩϯΛ ؚΊͯهड़͍ͯͩ͘͠͞ɻ ``` */
  63. /* # ϒϩοΫ໊͜͜ʹϘλϯɺφϏήʔγϣϯͳͲελΠϧ͕ԿΛ͍ͯ͠Δ͔Λ ؆ܿʹઆ໌͍ͯͩ͘͠͞ɻ Ұߦۭ͚ͯɺͪ͜Β͸ϒϩοΫͷઆ໌จͰ͢ɻ ελΠϧཁૉͷ໾ׂ΍ৼΔ෣͍Λઆ໌͢Δ৔ॴͰ͢ɻ ͕͜͜࢓༷ॻʹ͋ͨΔ෦෼ʹͳΓ·͢ɻ ίϝϯτϒϩοΫ಺͸NBSLEPXOͱ͍͏ܗࣜͰهड़͠·͢ɻ ``` ྫࣔ͞ΕΔ)5.-͸͜ͷόοΫςΟοΫΛճ܁Γฦͨ͠ϒϩοΫ಺ʹ

    هड़͠·͢ɻ ٙࣅཁૉΛදࣔ͢Δ৔߹͸Ϋϥε໊ͱͯ͠AIPWFSAɺABDUJWFAͳͲίϩϯΛ ؚΊͯهड़͍ͯͩ͘͠͞ɻ ``` */
  64. /* # ϒϩοΫ໊͜͜ʹϘλϯɺφϏήʔγϣϯͳͲελΠϧ͕ԿΛ͍ͯ͠Δ͔Λ ؆ܿʹઆ໌͍ͯͩ͘͠͞ɻ Ұߦۭ͚ͯɺͪ͜Β͸ϒϩοΫͷઆ໌จͰ͢ɻ ελΠϧཁૉͷ໾ׂ΍ৼΔ෣͍Λઆ໌͢Δ৔ॴͰ͢ɻ ͕͜͜࢓༷ॻʹ͋ͨΔ෦෼ʹͳΓ·͢ɻ ίϝϯτϒϩοΫ಺͸NBSLEPXOͱ͍͏ܗࣜͰهड़͠·͢ɻ ``` ྫࣔ͞ΕΔ)5.-͸͜ͷόοΫςΟοΫΛճ܁Γฦͨ͠ϒϩοΫ಺ʹ

    هड़͠·͢ɻ ٙࣅཁૉΛදࣔ͢Δ৔߹͸Ϋϥε໊ͱͯ͠AIPWFSAɺABDUJWFAͳͲίϩϯΛ ؚΊͯهड़͍ͯͩ͘͠͞ɻ ``` */
  65. /* # ϒϩοΫ໊͜͜ʹϘλϯɺφϏήʔγϣϯͳͲελΠϧ͕ԿΛ͍ͯ͠Δ͔Λ ؆ܿʹઆ໌͍ͯͩ͘͠͞ɻ Ұߦۭ͚ͯɺͪ͜Β͸ϒϩοΫͷઆ໌จͰ͢ɻ ελΠϧཁૉͷ໾ׂ΍ৼΔ෣͍Λઆ໌͢Δ৔ॴͰ͢ɻ ͕͜͜࢓༷ॻʹ͋ͨΔ෦෼ʹͳΓ·͢ɻ ίϝϯτϒϩοΫ಺͸NBSLEPXOͱ͍͏ܗࣜͰهड़͠·͢ɻ ``` ྫࣔ͞ΕΔ)5.-͸͜ͷόοΫςΟοΫΛճ܁Γฦͨ͠ϒϩοΫ಺ʹ

    هड़͠·͢ɻ ٙࣅཁૉΛදࣔ͢Δ৔߹͸Ϋϥε໊ͱͯ͠AIPWFSAɺABDUJWFAͳͲίϩϯΛ ؚΊͯهड़͍ͯͩ͘͠͞ɻ ``` */
  66. /* # Ϙλϯ Ϙλϯ͸ͳΔ΂͘େ͖͘ɺΫϦοΫͰ͖Δͱ෼͔ΔΑ͏ʹ͢Δ͜ͱ ABAɺACVUUPOAɺAJOQVU<UZQFCVUUPO>Aɺ ·ͨ͸AJOQVU<UZQFTVCNJU>A͸ಉ͡ελΠϧʹ͢Δ͜ͱ AIPWFSAɺABDUJWFA GPSNλάܥʹ͸AIPWFSAɺABDUJWFAΫϥεΛ ෇༩͢Δ ʹ͸

    ඞͣ ঢ়ଶʹ߹ΘͤͨελΠϦϯάΛߦ͏͜ͱ AEJTBCMFEAɺ·ͨ͸AEJTBCMFEA΋ಉ༷ʹঢ়ଶʹ߹ΘͤͨελΠϧΛ ߦ͏͜ͱ ``` <a href="#" class="btn btn-fluid">Ϙλϯ (a.btn.btn-fluid)</a> ``` */
  67. www.a-blogcms.jp

  68. Tips and Tricks

  69. Sass SCSS Less Stylus ΋ར༻Մೳ

  70. Readme.md Index.html ͕͋Δ৔߹ʹ͸ Λੜ੒͢Δ

  71. εϖʔεΛೖΕΔͱ ίϝϯτͷલʹ υΩϡϝϯτʹ ൓ө͠ͳ͍

  72. :hover :focus දࣔͰ͖Δ ͳͲͷٙࣅΫϥε΋

  73. styleGuide? What To

  74. Not every CSS rule should be documented. You should document

    a rule declaration when the rule can accurately describe a visual UI element in the styleguide. Each element should have one documentation block describing that particular UI element's various states. - Kyle Neath
  75. Buttons Navigations Forms Tabs Typography Etc.

  76. ʹ͋ΔΑ͏ͳ6*ཁૉ͢΂ͯ Basically: Twitter Bootstrap Zurb Foundation

  77. Conclusion...

  78. ࣮ࡍͷαΠτͱڞ௨ͷ $44ͷίϝϯτ͔Β ࣗಈͰυΩϡϝϯτΛੜ੒ Style Guide:

  79.  ߋ৽͞Εͳ͍υΩϡϝϯτΛࠜઈ͠  ΧεέʔυͷεύήοςΟΛςελϒϧͰ ݎ࿚ͳ؀ڥʹมԽͤ͞  ΦϒδΣΫτࢦ޲ͳ$44Λهड़͢Δ खॿ͚Λ͠  ΢ΣϒαΠτͷϧοΫϑΟʔϧΛ

    ౷Ұ͢Δ
  80. Style Guide IS Not Just A Tool. it is a

    Workflow.
  81. Design a system, not a web page or site. -

    Andy Clarke
  82. THank you! L CSSRadar