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 full-size slide

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

    View full-size slide

  3. selector {
    property: value;
    }

    View full-size slide

  4. CSS is Simple

    View full-size slide

  5. But CSS is
    Programming Language!

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Foundation
    Approach
    Agenda
    جૅ
    ఏҊ

    View full-size slide

  13. Foundation
    Foundation
    جૅ

    View full-size slide

  14. What is “Good” CSS?

    View full-size slide

  15. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  18. A Brief History of
    CSS Architecture

    View full-size slide

  19. slideshare.net/hiloki/modern-cssarchitectureqcon

    View full-size slide

  20. OOCSS
    by Nicole Sullivan
    Object Oriented CSS

    View full-size slide

  21. github.com/stubbornella/oocss/wiki

    View full-size slide

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

    View full-size slide

  23. BEM
    by Yandex
    Block, Element, Modifier

    View full-size slide

  24. 42
    No Silver Bullet
    Again

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. Approach
    Approach
    ఏҊ

    View full-size slide

  28. Just an Example

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. Style Guide / Pattern Library

    View full-size slide

  33. github.com/styleguide/css

    View full-size slide

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

    View full-size slide

  35. warpspire.com/kss/

    View full-size slide

  36. jacobrask.github.io/styledocco

    View full-size slide

  37. trulia.github.io/hologram

    View full-size slide

  38. github.com/adactio/Pattern-Primer

    View full-size slide

  39. A Lots More...

    View full-size slide

  40. Document First

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. Code Smells in CSS

    View full-size slide

  44. Harry Roberts
    A.K.A CSS Wizardly

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. Low-Hanging Fruit
    for CSS Refactoring

    View full-size slide

  56. “Divide and conquer.”

    View full-size slide

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

    View full-size slide

  58. Base
    Layout
    Module
    State
    + Shame

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. github.com/operasoftware/ucss

    View full-size slide

  63. github.com/ai/autoprefixer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. Media Object

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  74. www.stylestats.org

    View full-size slide

  75. html5experts.jp/t32k/5743/

    View full-size slide

  76. Linter / Unit test

    View full-size slide

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

    View full-size slide

  78. JSHint / JSLint

    View full-size slide

  79. github.com/causes/scss-lint

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  82. Unit === Module / Component

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  86. PhantomCSS
    by Huddle
    git.io/nw85Hw

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  89. WebdriverCSS
    by WebdriverJS
    git.io/webdrivercss

    View full-size slide

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

    View full-size slide

  91. Huxley
    by Facebook
    git.io/huxley

    View full-size slide

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

    View full-size slide

  93. SiteEffect
    by Timm Jensen
    siteeffect.io

    View full-size slide

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

    View full-size slide

  95. body { margin-top: 2px }

    View full-size slide

  96. ۙ೔ެ։(Β͍͠)

    View full-size slide

  97. Outro
    Outro
    ͓ΘΓʹ

    View full-size slide

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

    View full-size slide

  99. Web Components

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide