CSS Architecture - モバイルウェブアプリのためのCSS設計と開発アプローチ

32f242f75b63e7174b493446de54a6b8?s=47 Yuya Saito
February 20, 2013

CSS Architecture - モバイルウェブアプリのためのCSS設計と開発アプローチ

表現言語ともいえるCSSはきちんとした設計をしておかないと知らぬ間にメンテナンスが不可能になってしまいます。CSS3の利用が当たり前のモバイルの世界ならなおさらです。今回はそのコントロールが難しいCSSに対し、どんな設計手法があるのか、そしてどんな開発アプローチがあるのかについて紹介していきます。

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

February 20, 2013
Tweet

Transcript

  1. 2013.02.20 $44ઃܭͱ։ൃΞϓϩʔν ϞόΠϧ΢ΣϒΞϓϦͷͨΊͷ Yuya Saito Architecture CSS Architecture CSS

  2.  @CSSRadar

  3. En.ja OSS https://github.com/enja-oss

  4. @Cyberagent

  5. Agenda CSS๊͕͑Δෛ࠴  CSS։ൃΞϓϩʔνϫʔΫϑϩʔ  CSSΞʔΩςΫνϟ 

  6. CSS๊͕͑Δ໋॓తͳෛ࠴ Debt on CSS

  7. (Another) Father of JavaScript Douglas Crockford

  8. The Web is the most hostile software engineering environment imaginable.

    “ ” - Douglas Crockford
  9. CSS is: એݴܕϓϩάϥϛϯάݴޠ

  10. CSS is: σβΠϯΛදݱ͢ΔͨΊͷݴޠ

  11. CSS is: ϩδΧϧʹσβΠϯ͢Δͷ͕೉͍͠

  12. CSS is: ޿ൣғͷ੹೚Λෛ͏ݴޠ

  13. # CSS HTML JS

  14. Planning ઃܭ࣮ͦ͜૷͢Δ্Ͱ΋ͬͱ΋େ੾ͳϑΣʔζ

  15. paradigm Shift ΢ΣϒΞϓϦέʔγϣϯͱ͍͏৽͍͠ύϥμΠϜʹ ͓͍ͯHTMLɺ CSSɺ JavaScriptͷ໾ׂ͕ ৵৯͠͸͡Ί͍ͯΔɻ

  16. JavaScript: HTMLςϯϓϨʔτ HTML: DOMૢ࡞ɺ ΠϕϯτͷϑοΫ CSS: ϨΠΞ΢τ + ϓϨθϯςʔγϣϯ +

    Ξχϝʔγϣϯ
  17. Designing a system, not a page “ ” - Andy

    Clarke
  18. OOCSSʹΑΔෛ࠴ͷฦࡁ OOCSS by Nicole Sullivan

  19. OOCSS?

  20. Object Oriented? ΦϒδΣΫτࢦ޲ϓϩάϥϛϯάͱ͸ ૬ޓʹϝοηʔδΛૹΓ͋͏ΦϒδΣΫτͷू·Γͱ͠ ͯϓϩάϥϜΛߏ੒͢Δٕ๏Ͱ͋Δɻ <ʜ>ΦϒδΣΫτࢦ޲ϓϩάϥϛϯάݴޠͷඋ͑Δ ΫϥεͱͦͷܧঝͳͲͷ࢓૊ΈΛར༻͢Δ΄͏͕ ֨ஈʹ։ൃޮ཰͸޲্͢Δɻ - Wikipedia

  21. CSSʹ͓͚ΔΦϒδΣΫτ TextText tsts TextText tsts TextText TextText TextText tsts TextText

    tsts TextText TextText
  22. Architect Christopher Alexander

  23. Each pattern describes a problem that occurs over and over

    again in our environment, and then describes the core of the solution to that problem, in such way that you can use this solution a million times over, without ever doing it the same way twice. “ ” - Christopher Alexandar
  24. ύλʔϯͱ͸ͦΕͧΕզʑ͕ੜ͖͍ͯΔ؀ڥͷ தͰԿ౓΋܁Γฦ͠ൃੜ͢Δ໰୊Λઆ໌͢Δ ΋ͷͰ͋Γɺ ͦΕΒͷ໰୊ʹର͢ΔίΞͱͳΔ ղܾΛઆ໌͢Δ΋ͷͰ΋͋Γ·͢ɻ ίΞͱͳΔղܾͱ͸ͦͷղܾํ๏Λಉ͜͡ͱΛ ܁Γฦͣ͞ɺ ਺ඦສճͰ΋ར༻Ͱ͖Δ΋ͷͰ͢ɻ “ ”

    - Christopher Alexandar
  25. OOCSSͷݪଇ ߏ଄ͱݟͨ໨ͷ෼཭ ίϯςΠφͱίϯςϯτͷ෼཭

  26. ηϚϯςΟοΫ΢Σϒ΁ͷٙ໰ ༨ܭͳཁૉΛ࢖Θͳ͍ ͦͯ͠Ϋϥε΋ηϚϯςΟοΫͰ͋Δ΂͖

  27. Front-end Developer, Twitter Nicolas Gallagher

  28. […][N]ot all semantics need to be content-derived. Class names cannot

    be “unsemantic”. Whatever names are being used: they have meaning, they have purpose. Class name semantics can be different to those of HTML elements. “ ” - Nicolas Gallagher
  29. ηϚϯςΟοΫ͕͢΂ͯίϯςϯπ೿ੜͰ͋Δ ඞཁ͸ͳ͍ɻ Ϋϥε໊ʹ ʮηϚϯςΟοΫͰ͸ ͳ͍ʯ ঢ়ଶ͸ͳ͍ɻ ͲΜͳ໊લ͕࢖ΘΕΑ͏ͱɺ ͦΕΒʹ͸ҙຯ͕͋Γɺ ໨త͕͋Δɻ Ϋϥε໊ͷ

    ηϚϯςΟοΫੑ͸HTMLཁૉͷͦΕͱҟͳΔ͜ ͱ΋͋Γ͑Δɻ “ ” - Nicolas Gallagher
  30. ύλʔϯͱ͸ͦΕͧΕզʑ͕ੜ͖͍ͯΔ؀ڥͷ தͰԿ౓΋܁Γฦ͠ൃੜ͢Δ໰୊Λઆ໌͢Δ ΋ͷͰ͋Γɺ ͦΕΒͷ໰୊ʹର͢ΔίΞͱͳΔ ղܾΛઆ໌͢Δ΋ͷͰ΋͋Γ·͢ɻ ίΞͱͳΔղܾͱ͸ͦͷղܾํ๏Λಉ͜͡ͱΛ ܁Γฦͣ͞ɺ ਺ඦສճͰ΋ར༻Ͱ͖Δ΋ͷͰ͢ɻ “ ”

    - Christopher Alexandar
  31. blog.millermedeiros.com/solid-css/

  32. enja.studiomohawk.com/2012/09/17/solidcss/

  33. inuitcss.com

  34. smacss.com

  35. CSS Preprocessor CSSϓϦϓϩηοαʹΑΔฦࡁ

  36. CSS Preprocessor? ม਺ ϛοΫεΠϯ ΤΫεςϯυ

  37. CSS Preprocessor ڧྗͰ͋Δ͕Ώ͑ɺ ઃܭ΍ϩδοΫʹ͍ͭͯ ৻ॏ͕͞ٻΊΒΕΔΑ͏ʹɻ

  38. OOCSS and Preprocessors in a Tree, K-I-S-S-I-N-G - Nicole Sullivan

    @ Smashing Magazine Conference
  39. xanthir.com/b4N80

  40. With great power, comes great responsibility “ ” - Uncle

    Ben from Spider Man
  41. $44։ൃΞϓϩʔνϫʔΫϑϩʔ Building CSS

  42. blueprintcss.org

  43. 960.gs

  44. yaml.de

  45. Ϟμϯϒϥ΢βͷར༻཰ͷ޲্ HTML5ɺCSS3ͷొ৔ εϚʔτϑΥϯͷ୆಄ Ϩεϙϯγϒ΢Σϒ΁ͷؔ৺

  46. twitter.github.com/bootstrap/

  47. foundation.zurb.com

  48. Contents First ίϯςϯπ ɾ ϑΝʔετ

  49. Module Approach ϞδϡʔϧΞϓϩʔν

  50. FrameWork Approach λΠϙάϥϑΟʔ Ϧηοτ άϦου ϑϨʔϜϫʔΫΞϓϩʔν

  51. Module Approach X X X TextTextTextText TextText TextText TextText TextText

    TextText tsts TextText TextText TextTextTextext tsts ૊Έ߹Θͤ ίϯϙʔωϯτ Ϟδϡʔϧ TextText tsts TextText tsts TextText TextText ϞδϡʔϧΞϓϩʔν
  52. necolas.github.com/normalize.css/

  53. framelessgrid.com

  54. twitter.github.com/bootstrap/

  55. JavaScript s jQuery CSS s Bootstrap

  56. I think we’re seeing the emphasis shift from valuing trivia

    to valuing tools. “ ” - Rebecca Murphey at A Baseline for Front-End Developers
  57. What is Tool? ։ൃऀͦΕͧΕ͕ࣗ༝ʹѻ͑ΔදݱͷετοΫ

  58. Ϙλϯ ςΩετ Ϙλϯ ݟग़͠ Ϙλϯ ը૾ࠨ খݟग़͠ɺ ςΩετ  ஋ஈ

    Ϙλϯ ΞΠίϯɺ ςΩετ ΞΠίϯ Ϙλϯ
  59. ৔ॴϕʔεͷΫϥε໊ ΧεέʔυΛ্ॻ͖͢ΔͨΊͷID HTML/CSSʹҰ؏ੑ͕ͳ͘࠶ར༻͕೉͍͠ CSS͸۩ମੑ͕ߴ͗͢Δ

  60. Start designing from the content out, rather than the canvas

    in. “ ” - A Richer Canvas by Mark Boulton
  61. σβΠϯ͕ίϯςϯπϑΝʔετͰ͋Ε͹ɺ ίʔσΟϯάΞϓϩʔν΋ಉ͡Α͏ʹ౰ͯ͸·Δɻ

  62. Ϙλϯ ΞΠίϯ λΠϙάϥϑΟʔ

  63. ϔομʔϞδϡʔϧ ϝσΟΞϞδϡʔϧ ΞΠίϯϞδϡʔϧ

  64. None
  65. inkdesign.jp/notes/2012/12/07/css-preprocessor-styleguide.html

  66. Codify the Pattern ελΠϧΨΠυΛίʔσΟϯά͞Εͨ ύλʔϯϥΠϒϥϦʹ͢Δ

  67. Component Bank ίϯϙʔωϯτόϯΫ

  68. When you are aware of the [your own common patterns]

    that motivate your decisions, you can be conscious of whether you are designing by habit (“this is what I always do here…”) or whether you are actually applying the most fitting solution to the problem at hand. “ ” - Ryan Singer
  69. Կ͔ΛܾΊΔಈػͱͳΔࣗ෼ࣗ਎ͷҰൠతͳ ύλʔϯʹؾ͕ͭ͘͜ͱ͕Ͱ͖Ε͹ɺ श׳΍׳ΕͰσβΠϯΛ͍ͯ͠Δͷ͔ɺ खݩʹ͋Δ໰୊ʹରͯ͠࠷΋దͨ͠ղܾΛ ͠Α͏ͱ͍ͯ͠Δͷ͔ʹ͍ͭͯ΋ ؾ͕ͭ͘͜ͱ͕Ͱ͖Δɻ “ ” - Ryan

    Singer
  70. None
  71. $44ΞʔΩςΫνϟ CSS Architecture

  72. smacss.com/book/categorizing

  73. Category ΧςΰϥΠζ͸ύλʔϯΛ ໌֬ʹ͢Δ ᶅ εςʔτ ᶃϕʔε ᶄϨΠΞ΢τ ᶆ Ϟδϡʔϧ

  74. Base ϕʔε ϒϥ΢βʹද͍ࣔͤͨ͞σϑΥϧτ ύλʔϯԽ͕͠΍͍͢ΧςΰϦ Normalize.cssΛ௨ͨ͡ཁૉͷඪ४Խ λΠϙάϥϑΟʔ ϦϯΫͷදݱ ϑΥʔϜͷཁૉ em΍iɺ strong͕ͲΜͳݟͨ໨ʹͳΔ͔

  75. Layout ϨΠΞ΢τ άϦουܥίϯϙʔωϯτ λϒϨοτ୺຤΁ͷରԠ΋ࢹ໺ʹ͍ΕΔͱ׆༻͕ ֦େ͢ΔΧςΰϦ άϦουπʔϧ͸ࠓͰ΋ଟ͘ެ։͞Ε͍ͯΔ

  76. εςʔτঢ়ଶ State ཁૉͷঢ়ଶΛදͨ͢ΊͷΧςΰϦ εϚʔτϑΥϯͷΞϓϦέʔγϣϯʹ͓͍ͯ ๨Ε͕ͪͳ͕Βॏཁͳ෦෼ Τϥʔ࣌ / ඪ४࣌ දࣔ /

    ඇදࣔ ΞΫςΟϒ / ඇΞΫςΟϒ
  77. Ϟδϡʔϧ Module ΞϓϦέʔγϣϯʹ͓͚Δ࠷΋ॏཁͰ͔ͭɺ छྨ΋਺΋ଟ͘ͳΔΧςΰϦ දݱͷύλʔϯͷதͰ΋࠷ॏཁ Ϧετ ςʔϒϧ ΞΠίϯ

  78. Naming Rules ໋໊نଇ

  79. Naming Rules ໋໊نଇ ϕʔε ཁૉηϨΫλɺ :hoverͳͲͷٙࣅΫϥεʹదԠ ϨΠΞ΢τ l-ɺg-Λલஔޠྫ: l-left-colɺ l-right-col

    εςʔτ is-Λલஔޠྫ: is-hiddenɺ is-error Ϟδϡʔϧ લஔޠͳ͠
  80. Directory / File σΟϨΫτϦϑΝΠϧߏ੒

  81. Simple Restriction ࣗ༝͕ଟ͍ݴޠͰ͋Δ΄Ͳɺ ։ൃऀΈ͔ͣΒ੍໿Λ࡞Δ΄͏͕͍͍ɻ

  82. ߟ͑ํ൑அͷϑϨʔϜϫʔΫ

  83. learnboost.github.com/stylus/

  84. ├── _base/ │ ├── _default.styl │ ├── _font-family.styl │ ├──

    _link.styl │ ├── _normalize.styl │ ├── _typography.styl │ └── index.styl ├── _layout/ │ ├── _grid.styl │ └── index.styl ├── _module/ │ ├── _button/ │ │ ├── _button.styl │ │ └── index.styl │ ├── _icon/ │ │ ├── _font-awesome.styl │ │ └── index.styl │ ├── _island/ │ │ ├── _island.styl │ │ └── index.styl │ ├── _list/ │ │ ├── _block.styl │ │ ├── _linear.styl │ │ └── index.styl │ ├── _media/ │ │ ├── _media.styl │ │ └── index.styl │ ├── _nav/ │ │ ├── _nav.styl │ │ └── index.styl │ ├── _pagination/ │ │ ├── _pagination.styl │ │ └── index.styl │ ├── _table/ │ │ ├── _table.styl │ │ └── index.styl │ ├── _texture/ │ │ ├── _texture.styl │ │ └── index.styl │ └── index.styl ├── _state/ │ ├── _state.styl │ └── index.styl ├── _helper.styl ├── _main.styl ├── _mixin.styl ├── _site-setting.styl └── master.styl
  85. ├── _base/ ├── _layout/ ├── _module/ └── _state/

  86. ├── _helper.styl ├── _main.styl ├── _mixin.styl ├── _site-setting.styl └── master.styl

  87. _base/ ├── _default.styl ├── _font-family.styl ├── _link.styl ├── _normalize.styl ├──

    _typography.styl └── index.styl
  88. @import "_normalize" @import "_default" @import "_link" @import "_font-family" @import "_typography"

  89. _module ├── _button/ ├── _icon/ ├── _island/ ├── _list/ ├──

    _media/ ├── _nav/ ├── _pagination/ ├── _table/ ├── _texture/ └── index.styl
  90. Component Bank

  91. Scaffolding ࠎ૊Έɺ ଍৔

  92. Scaffolding Α͘ར༻͢ΔύλʔϯΛूத؅ཧ͢ΔҙຯͰ΋ ඇৗʹڧྗͳπʔϧɻ ίϯϙʔωϯτόϯΫͱ૬ੑ΋͍͍ɻ

  93. ·ͱΊ Why?

  94. q Smart Phone  Desktop 

  95. Smart Phone  ϏδϡΞϧύλʔϯ͸ PCͱൺ΂ͯগͳ͘ͳΔ

  96. Smart Phone  εΫϦʔϯεϖʔε͕খ͍͞ εϚʔτϑΥϯΞϓϦ͸ 1$ͱൺ΂Ε͹ݶΒΕͨ දݱ͔͠Ͱ͖ͳ͍

  97. # Iteration ։ൃͷεϐʔυΑΓ΋ɺ վળͷεϐʔυʹϑΥʔΧεɻ $44͸ͦͷվળͷϓϩηεͰ ϘτϧωοΫʹͳΓ΍͍͢ɻ

  98. Do Not Re-invent the Wheel ίϯϙʔωϯτόϯΫ+ sca!oldingʹ ϘΠϥʔϓϨʔτ 

  99. Innovative ֵ৽తͳΠϯλʔϑΣΠε͸ ౰ͨΓલͷΠϯλʔϑΣΠεʹ Αͬͯࢧ͑ΒΕ͍ͯΔɻ 

  100. ܕͷ͋Δਓ͕ܕΛഁΔ͜ͱΛܕഁΓͱ͍͍ɺ ܕͷͳ͍ਓ͕ܕΛഁΔ͜ͱΛܕແ͠ͱ͍͏ɻ “ ” - ແண੒ګBUࢠڙ૬ஊࣨ

  101. $44ΞʔΩςΫνϟ͸ ίϯϙʔωϯτόϯΫͱͷ ͭͳ͗ͱͳΔΞϓϩʔν Architecture 

  102. Best Practice ϕετϓϥΫςΟε

  103. Our greatest weakness lies in giving up. The most certain

    way to succeed is always to try just one more time. “ ” - Tomas A. Edison
  104. Thank you!