Refactoring CSS

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

Transcript

1. Refactoring CSS
   Refactoring CSS
   Yuya Saito at REMIXING
   

   View Slide

2. ιʔείʔυ͸ཧղ͠΍͘͢
   ͳΒͳ͚Ε͹ͳΒͳ͍ɻ
   

   View Slide

3. selector {
   property: value;
   }
   

   View Slide

4. CSS is Simple
   

   View Slide

5. But CSS is
   Programming Language!
   

   View Slide

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
   

   View Slide

7. ϏδϡΞϧɾϓϨθϯςʔγϣϯ
   ϨΠΞ΢τ
   ΠϯλϥΫγϣϯ+Ξχϝʔγϣϯ
   

   View Slide

8. ໾ׂ͕ଟ্͍ʹɺڧ͍ґଘΛ࣋ͪɺ
   ݴޠͱܾͯͯ͠͠ڧྗͩͱ͸ݴ͍͕͍ͨɻ
   

   View Slide

9. $44Ͱ༏ΕͨίʔυΛॻ͘͜ͱ͸
   ೉͍͜͠ͱɻ
   

   View Slide

10. ϢʔβମݧΛ޲্ͤ͞ΔͨΊʹ
    ࠷΋༏Εͨํ๏
    

    View Slide

11. Iteration
    

    View Slide

12. ϦϑΝΫλϦϯά͸ɺ
    ͦͷ༏ΕͨCSSΛॻͨ͘Ίʹ
    ඞཁෆՄܽͳϫʔΫϑϩʔɻ
    

    View Slide

13. Foundation
    Approach
    Agenda
    جૅ
    ఏҊ
    

    View Slide

14. Foundation
    Foundation
    جૅ
    

    View Slide

15. What is “Good” CSS?
    

    View Slide

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.
    

    View Slide

17. Predictable (༧ଌ͠΍͍͢)
    Reusable (࠶ར༻͠΍͍͢)
    Maintainable (อक͠΍͍͢)
    Scalable (֦ு͠΍͍͢)
    The Goals of
    Good CSS Architecture
    by Philip Walton
    

    View Slide

18. ͭͷੑ࣭Λ$44Ͱຬͨ͢͜ͱ͸
    ඇৗʹ೉͍͜͠ͱɻ
    

    View Slide

19. A Brief History of
    CSS Architecture
    

    View Slide

20. slideshare.net/hiloki/modern-cssarchitectureqcon
    

    View Slide

21. OOCSS
    by Nicole Sullivan
    Object Oriented CSS
    

    View Slide

22. github.com/stubbornella/oocss/wiki
    

    View Slide

23. SMACSS
    by Jonathan Snook
    Scalable and Modular
    Architecture for CSS
    

    View Slide

24. smacss.com
    

    View Slide

25. BEM
    by Yandex
    Block, Element, Modifier
    

    View Slide

26. bem.info
    

    View Slide

27. 42
    No Silver Bullet
    Again
    

    View Slide

28. ͦΕͧΕͷํ๏࿦ʹ͸
    ͋ΔҰ؏ͨ͠ڞ௨߲͕ଘࡏ͢Δɻ
    

    View Slide

29. ύλʔϯΛͲͷΑ͏ʹ
    ൃݟ͠ɺ࣮૷͠ɺ໋໊͢Δͷ͔ɻ
    

    View Slide

30. Approach
    Approach
    ఏҊ
    

    View Slide

31. Just an Example
    

    View Slide

32. Bret Victor
    The Future of Programming
    @DBX Conference 2013
    

    View Slide

33. “The most dangerous thought you can have as
    a creative person is to think you know what
    you're doing.”
    

    View Slide

34. “Learn tools, and use tools,
    but don't accept tools.
    Always distrust them; always be alert for
    alternative ways of thinking. ”
    — Bret Victor
    

    View Slide

35. Style Guide / Pattern Library
    

    View Slide

36. github.com/styleguide/css
    

    View Slide

37. ݸʑͷUIύλʔϯ΍ϨΠΞ΢τΛ
    ࣗಈతʹ1ϖʔδʹू໿͢Δπʔϧɻ
    

    View Slide

38. Comment
    

    View Slide

39. warpspire.com/kss/
    

    View Slide

40. jacobrask.github.io/styledocco
    

    View Slide

41. trulia.github.io/hologram
    

    View Slide

42. Snippets
    

    View Slide

43. github.com/adactio/Pattern-Primer
    

    View Slide

44. pea.rs
    

    View Slide

45. A Lots More...
    

    View Slide

46. Document First
    

    View Slide

47. “ࣗ෼ͷ͍ͨ৔ॴ͸ɺͦ͜Λग़ͯߦ͘ͱ͖ɺ
    དྷͨ࣌ΑΓ΋͖Ε͍ʹ͠ͳ͚Ε͹ͳΒͳ͍ɻ”
    — The Boy Scout Rule
    

    View Slide

48. ϦϑΝΫλΛߦ͏ͨΊʹɺ
    υΩϡϝϯτΛॻ͘Α͏ʹ͢Δɻ
    

    View Slide

49. Code Smells in CSS
    

    View Slide

50. Harry Roberts
    A.K.A CSS Wizardly
    

    View Slide

51. csswizardry.com/2012/11/code-smells-in-css/
    

    View Slide

52. article.enja.io/articles/code-smells-in-css.html
    

    View Slide

53. Undoing styles
    ελΠϧͷϦηοτ
    

    View Slide

54. ϧʔϧηοτ͸ৗʹܧঝͷΈΛߦ͏΂͖Ͱɺ
    Ҏલͷ΋ͷʹ௥Ճ͢Δ΂͖Ͱ͋Γɺ
    ϦηοτΛ͢Δ΂͖Ͱ͸ͳ͍ɻ
    

    View Slide

55. Magic numbers
    ϚδοΫφϯόʔ
    

    View Slide

56. ϚδοΫφϯόʔͱ͸ɺཧ༝΋ͳ͘
    ʮಈ࡞͢Δ͔Βʯͱ͍͏͚ͩͰ࢖ΘΕ͍ͯΔ஋ɻ
    

    View Slide

57. .site-nav { [ελΠϧ] }
    .site-nav > li:hover .dropdown {
    position: absolute;
    top: 37px; /*ϚδοΫφϯόʔ*/
    left: 0;
    }
    

    View Slide

58. Qualified selectors
    ੍ݶͷڧ͍ηϨΫλ
    

    View Slide

59. ul.nav {...}!
    a.button {...}!
    div.header {...}
    

    View Slide

60. ηϨΫλ͸ՄೳͳݶΓ࠷খݶʹࢭΊΔ΂͖ɻ
    

    View Slide

61. Low-Hanging Fruit
    for CSS Refactoring
    

    View Slide

62. “Divide and conquer.”
    

    View Slide

63. Categorise CSS Rules in the Stylesheet
    $44ϧʔϧΛΧςΰϦԽ͢Δ
    

    View Slide

64. Base
    Layout
    Module
    State
    + Shame
    

    View Slide

65. csswizardry.com/2013/04/shame-css/
    

    View Slide

66. Shame
    Ͳ͜Ͱར༻͞Ε͍ͯΔ͔
    Կނஏ͔͍ͣ͠ίʔυΛॻ͘Ӌ໨ʹ͔ؕͬͨ
    Shame͔Β୤͢ΔͨΊͷखॱ
    

    View Slide

67. Remove unused CSS
    ࢖༻͍ͯ͠ͳ͍ϧʔϧΛ࡟আ͢Δ
    

    View Slide

68. github.com/operasoftware/ucss
    

    View Slide

69. github.com/ai/autoprefixer
    

    View Slide

70. Rename Selectors
    ҙຯͷ఻ΘΓ΍͍͢ηϨΫλʹॻ͖׵͑Δ
    

    View Slide

71. CSSͷओ໾͸ϓϩύςΟͰ͸ͳ͘ɺηϨΫλɻ
    

    View Slide

72. ͔͠͠ɺ໋໊͸։ൃऀʹͱͬͯ͸
    ͍ͭͩͬͯ಄௧ͷλωͰ͢ɻ
    

    View Slide

73. ηϨΫλ͕࣋ͭ໨తɺ͋Δ͍͸ҙٛΛ
    શମΛ௨ͯ͠ৼΓฦͬͯɺ
    Կ౓Ͱ΋໋໊͠ͳ͓ͤΔΑ͏ͳ
    ϫʔΫϑϩʔΛ࣋ͭ͜ͱɻ
    

    View Slide

74. Create Media Object
    ϝσΟΞɾΦϒδΣΫτΛ׆༻͢Δ
    

    View Slide

75. Media Object
    

    View Slide

76. View Slide

77. bit.ly/media-object-saves-100-code
    

    View Slide

78. Check Your CSS Health
    $44ͷݱঢ়ΛνΣοΫ͢Δ
    

    View Slide

79. େ఍͸͋·Γඒ͍͠ͱ͸ݴ͍͕͍ͨɺ
    ϨΨγʔͳίʔυϕʔεΛҾ͖ܧ͙ɻ
    

    View Slide

80. “Houston, we've had a problem.”
    

    View Slide

81. www.stylestats.org
    

    View Slide

82. html5experts.jp/t32k/5743/
    

    View Slide

83. Test in CSS
    

    View Slide

84. Linter / Unit test
    

    View Slide

85. Linter
    γϯλοΫεελΠϧνΣοΫ
    

    View Slide

86. JSHint / JSLint
    

    View Slide

87. csslint.net
    

    View Slide

88. github.com/causes/scss-lint
    

    View Slide

89. Unit test / End to End Test
    ϢχοτςετΤϯυτΡʔΤϯυςετ
    

    View Slide

90. ։ൃ͕ܧଓ͞Ε͍ͯΔπʔϧ͸
    ࢒೦ͳ͕Βଟ͘͸ͳ͍ɻ
    

    View Slide

91. Unit === Module / Component
    

    View Slide

92. εΫϦʔϯγϣοτΛൺֱ͢Δ͜ͱͰ
    ςετΛߦ͏ɻ
    

    View Slide

93. CSS Critic
    by Christoph Burgmer
    git.io/csscritic
    

    View Slide

94. CSS Critic
    HTMLϑΝΠϧ܈ʹରͯ͠ςετΛ࣮ߦ͢Δ
    FireFoxͰͷΈಈ࡞
    

    View Slide

95. PhantomCSS
    by Huddle
    git.io/nw85Hw
    

    View Slide

96. ಛఆͷDOMΛநग़ͯ͠ςετΛ࣮ߦ͢Δ
    WebkitͷϔουϨεϒϥ΢βͰͷΈಈ࡞
    phantomCSS
    

    View Slide

97. ಛఆͷϒϥ΢βͰ͔͠ಈ࡞͠ͳ͍ɻ
    

    View Slide

98. Selenium
    

    View Slide

99. WebdriverCSS
    by WebdriverJS
    git.io/webdrivercss
    

    View Slide

100. WebdriverCSS
     phantomCSSͷSelenium൛
     4݄಄͔Βߋ৽͕ͳ͍………
     

     View Slide

101. Huxley
     by Facebook
     git.io/huxley
     

     View Slide

102. Huxley
     ςετΛίʔυͰهड़ͤͣɺ࣮ࡍͷΞΫγϣϯΛه࿥
     (Կނ͔)FireFoxͰͷΈಈ࡞
     13೥11݄͔Βߋ৽͕ͳ͍………
     

     View Slide

103. SiteEffect
     by Timm Jensen
     siteeffect.io
     

     View Slide

104. SiteEffect
     ϑϧεΫϦʔϯγϣοτͰͷςετ
     ·ͩެ։લ
     

     View Slide

105. body { margin-top: 2px }
     

     View Slide

106. ۙ೔ެ։(Β͍͠)
     

     View Slide

107. Outro
     Outro
     ͓ΘΓʹ
     

     View Slide

108. $44Ͱ༏ΕͨίʔυΛॻ͘͜ͱ͸
     ೉͍͜͠ͱɻ
     

     View Slide

109. Web Components
     

     View Slide

110. ࢝Ί͔Β׬ᘳͳઃܭΛߦ͏͜ͱ͸Ͱ͖ͳ͍ɻ
     յΕͨͱ͖ʹ༐ؾΛ࣋ͬͯम෮Ͱ͖ΔઃܭΛ
     ໨ࢦ͢΂͖ɻ
     

     View Slide

111. ࢝Ί͔Β׬ᘳͳઃܭΛߦ͏͜ͱ͸Ͱ͖ͳ͍ɻ
     յΕͨͱ͖ʹ༐ؾΛ࣋ͬͯम෮Ͱ͖ΔઃܭΛ
     ໨ࢦ͢΂͖ɻ
     

     View Slide

112. “খ͘͞ࡅ͍ͯɺҰͭͣͭղܾ͢Ε͹ɺ
     ղܾͰ͖ͳ͍໰୊͸ͳ͍ɻ”
     — Andrew Carnegie
     

     View Slide

113. Thank You!
     Thank You!
     Follow Me at cssradar
     

     View Slide