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

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

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. ϔομʔϞδϡʔϧ ϝσΟΞϞδϡʔϧ ΞΠίϯϞδϡʔϧ
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
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. 
104. Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time. “ ” - Tomas A. Edison
105. Thank you!