Refactoring CSS

昨今のWeb開発においてCSSはほかのプログラミング言語と変わらないくらい巨大化し、複雑になり、そしてメンテナンスが難しくなってきています。
CSSにもリファクタリングはやはり必要です。
本セッションではCSSにおけるリファクタリングへのアプローチにはどのようなものがあるかについて紹介します。

Transcript

1. Refactoring CSS Refactoring CSS Yuya Saito at REMIXING
2. ιʔείʔυ͸ཧղ͠΍͘͢
   ͳΒͳ͚Ε͹ͳΒͳ͍ɻ
3. selector { property: value; }
4. CSS is Simple
5. But CSS is Programming Language!
6. “The skills required to write good CSS code are by and large the same skills required to write good code in general.” — Lea Verou
7. ϏδϡΞϧɾϓϨθϯςʔγϣϯ ϨΠΞ΢τ ΠϯλϥΫγϣϯ
   +
   Ξχϝʔγϣϯ
8. ໾ׂ͕ଟ্͍ʹɺڧ͍ґଘΛ࣋ͪɺ
   ݴޠͱܾͯͯ͠͠ڧྗͩͱ͸ݴ͍͕͍ͨɻ
9. $44Ͱ༏ΕͨίʔυΛॻ͘͜ͱ͸
   ೉͍͜͠ͱɻ
10. ϢʔβମݧΛ޲্ͤ͞ΔͨΊʹ
    ࠷΋༏Εͨํ๏
11. Iteration
12. ϦϑΝΫλϦϯά͸ɺ ͦͷ༏ΕͨCSSΛॻͨ͘Ίʹ ඞཁෆՄܽͳϫʔΫϑϩʔɻ
13. Foundation Approach Agenda جૅ ఏҊ
14. Foundation Foundation جૅ
15. What is “Good” CSS?
16. Refactoring (noun): a change made to the internal structure of software to make it easier to understand and cheaper to modify without changing its observable behaviour.
17. Predictable (༧ଌ͠΍͍͢) Reusable (࠶ར༻͠΍͍͢) Maintainable (อक͠΍͍͢) Scalable (֦ு͠΍͍͢) The Goals of Good CSS Architecture by Philip Walton
18. ͭͷੑ࣭Λ$44Ͱຬͨ͢͜ͱ͸
    ඇৗʹ೉͍͜͠ͱɻ
19. A Brief History of CSS Architecture
20. slideshare.net/hiloki/modern-cssarchitectureqcon
21. OOCSS by Nicole Sullivan Object Oriented CSS
22. github.com/stubbornella/oocss/wiki
23. SMACSS by Jonathan Snook Scalable and Modular Architecture for CSS
24. smacss.com
25. BEM by Yandex Block, Element, Modifier
26. bem.info
27. 42 No Silver Bullet Again
28. ͦΕͧΕͷํ๏࿦ʹ͸
    ͋ΔҰ؏ͨ͠ڞ௨߲͕ଘࡏ͢Δɻ
29. ύλʔϯΛͲͷΑ͏ʹ
    ൃݟ͠ɺ࣮૷͠ɺ໋໊͢Δͷ͔ɻ
30. Approach Approach ఏҊ
31. Just an Example
32. Bret Victor The Future of Programming @DBX Conference 2013
33. “The most dangerous thought you can have as a creative person is to think you know what you're doing.”
34. “Learn tools, and use tools, but don't accept tools. Always distrust them; always be alert for alternative ways of thinking. ” — Bret Victor
35. Style Guide / Pattern Library
36. github.com/styleguide/css
37. ݸʑͷUIύλʔϯ΍ϨΠΞ΢τΛ ࣗಈతʹ1ϖʔδʹू໿͢Δπʔϧɻ
38. Comment
39. warpspire.com/kss/
40. jacobrask.github.io/styledocco
41. trulia.github.io/hologram
42. Snippets
43. github.com/adactio/Pattern-Primer
44. pea.rs
45. A Lots More...
46. Document First
47. “ࣗ෼ͷ͍ͨ৔ॴ͸ɺͦ͜Λग़ͯߦ͘ͱ͖ɺ དྷͨ࣌ΑΓ΋͖Ε͍ʹ͠ͳ͚Ε͹ͳΒͳ͍ɻ” — The Boy Scout Rule
48. ϦϑΝΫλΛߦ͏ͨΊʹɺ υΩϡϝϯτΛॻ͘Α͏ʹ͢Δɻ
49. Code Smells in CSS
50. Harry Roberts A.K.A CSS Wizardly
51. csswizardry.com/2012/11/code-smells-in-css/
52. article.enja.io/articles/code-smells-in-css.html
53. Undoing styles ελΠϧͷϦηοτ
54. ϧʔϧηοτ͸ৗʹܧঝͷΈΛߦ͏΂͖Ͱɺ Ҏલͷ΋ͷʹ௥Ճ͢Δ΂͖Ͱ͋Γɺ ϦηοτΛ͢Δ΂͖Ͱ͸ͳ͍ɻ
55. Magic numbers ϚδοΫφϯόʔ
56. ϚδοΫφϯόʔͱ͸ɺཧ༝΋ͳ͘ ʮಈ࡞͢Δ͔Βʯͱ͍͏͚ͩͰ࢖ΘΕ͍ͯΔ஋ɻ
57. .site-nav { [ελΠϧ] } .site-nav > li:hover .dropdown { position: absolute; top: 37px; /*ϚδοΫφϯόʔ*/ left: 0; }
58. Qualified selectors ੍ݶͷڧ͍ηϨΫλ
59. ul.nav {...}! a.button {...}! div.header {...}
60. ηϨΫλ͸ՄೳͳݶΓ࠷খݶʹࢭΊΔ΂͖ɻ
61. Low-Hanging Fruit for CSS Refactoring
62. “Divide and conquer.”
63. Categorise CSS Rules in the Stylesheet $44ϧʔϧΛΧςΰϦԽ͢Δ
64. Base Layout Module State + Shame
65. csswizardry.com/2013/04/shame-css/
66. Shame Ͳ͜Ͱར༻͞Ε͍ͯΔ͔ Կނஏ͔͍ͣ͠ίʔυΛॻ͘Ӌ໨ʹ͔ؕͬͨ Shame͔Β୤͢ΔͨΊͷखॱ
67. Remove unused CSS ࢖༻͍ͯ͠ͳ͍ϧʔϧΛ࡟আ͢Δ
68. github.com/operasoftware/ucss
69. github.com/ai/autoprefixer
70. Rename Selectors ҙຯͷ఻ΘΓ΍͍͢ηϨΫλʹॻ͖׵͑Δ
71. CSSͷओ໾͸ϓϩύςΟͰ͸ͳ͘ɺηϨΫλɻ
72. ͔͠͠ɺ໋໊͸։ൃऀʹͱͬͯ͸ ͍ͭͩͬͯ಄௧ͷλωͰ͢ɻ
73. ηϨΫλ͕࣋ͭ໨తɺ͋Δ͍͸ҙٛΛ શମΛ௨ͯ͠ৼΓฦͬͯɺ Կ౓Ͱ΋໋໊͠ͳ͓ͤΔΑ͏ͳ ϫʔΫϑϩʔΛ࣋ͭ͜ͱɻ
74. Create Media Object ϝσΟΞɾΦϒδΣΫτΛ׆༻͢Δ
75. Media Object
77. bit.ly/media-object-saves-100-code
78. Check Your CSS Health $44ͷݱঢ়ΛνΣοΫ͢Δ
79. େ఍͸͋·Γඒ͍͠ͱ͸ݴ͍͕͍ͨɺ ϨΨγʔͳίʔυϕʔεΛҾ͖ܧ͙ɻ
80. “Houston, we've had a problem.”
81. www.stylestats.org
82. html5experts.jp/t32k/5743/
83. Test in CSS
84. Linter / Unit test
85. Linter γϯλοΫεελΠϧνΣοΫ
86. JSHint / JSLint
87. csslint.net
88. github.com/causes/scss-lint
89. Unit test / End to End Test Ϣχοτςετ
    
    ΤϯυτΡʔΤϯυςετ
90. ։ൃ͕ܧଓ͞Ε͍ͯΔπʔϧ͸ ࢒೦ͳ͕Βଟ͘͸ͳ͍ɻ
91. Unit === Module / Component
92. εΫϦʔϯγϣοτΛൺֱ͢Δ͜ͱͰ ςετΛߦ͏ɻ
93. CSS Critic by Christoph Burgmer git.io/csscritic
94. CSS Critic HTMLϑΝΠϧ܈ʹରͯ͠ςετΛ࣮ߦ͢Δ FireFoxͰͷΈಈ࡞
95. PhantomCSS by Huddle git.io/nw85Hw
96. ಛఆͷDOMΛநग़ͯ͠ςετΛ࣮ߦ͢Δ WebkitͷϔουϨεϒϥ΢βͰͷΈಈ࡞ phantomCSS
97. ಛఆͷϒϥ΢βͰ͔͠ಈ࡞͠ͳ͍ɻ
98. Selenium
99. WebdriverCSS by WebdriverJS git.io/webdrivercss
100. WebdriverCSS phantomCSSͷSelenium൛ 4݄಄͔Βߋ৽͕ͳ͍………
101. Huxley by Facebook git.io/huxley
102. Huxley ςετΛίʔυͰهड़ͤͣɺ࣮ࡍͷΞΫγϣϯΛه࿥ (Կނ͔)FireFoxͰͷΈಈ࡞ 13೥11݄͔Βߋ৽͕ͳ͍………
103. SiteEffect by Timm Jensen siteeffect.io
104. SiteEffect ϑϧεΫϦʔϯγϣοτͰͷςετ ·ͩެ։લ
105. body { margin-top: 2px }
106. ۙ೔ެ։(Β͍͠)
107. Outro Outro ͓ΘΓʹ
108. $44Ͱ༏ΕͨίʔυΛॻ͘͜ͱ͸
     ೉͍͜͠ͱɻ
109. Web Components
110. ࢝Ί͔Β׬ᘳͳઃܭΛߦ͏͜ͱ͸Ͱ͖ͳ͍ɻ
     
     
     յΕͨͱ͖ʹ༐ؾΛ࣋ͬͯम෮Ͱ͖ΔઃܭΛ
     ໨ࢦ͢΂͖ɻ
111. ࢝Ί͔Β׬ᘳͳઃܭΛߦ͏͜ͱ͸Ͱ͖ͳ͍ɻ
     
     
     յΕͨͱ͖ʹ༐ؾΛ࣋ͬͯम෮Ͱ͖ΔઃܭΛ
     ໨ࢦ͢΂͖ɻ
112. “খ͘͞ࡅ͍ͯɺҰͭͣͭղܾ͢Ε͹ɺ ղܾͰ͖ͳ͍໰୊͸ͳ͍ɻ” — Andrew Carnegie
113. Thank You! Thank You! Follow Me at cssradar