Refactoring CSS

Refactoring CSS

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

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

June 21, 2014
Tweet

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

  76. None
  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