Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Refactoring CSS

Refactoring CSS

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

Yuya Saito

June 21, 2014
Tweet

More Decks by Yuya Saito

Other Decks in Programming

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