Modern CSS: architecture, future specs and build flow

at DevFest Tokyo 2016.

Transcript

1. Modern CSS: architecture, future
   specs and build flow
   morishi'er @ #Devfest16
   

   View Slide

2. ࣗݾ঺հ
   .about-me {
   name: Masaaki Morishita;
   twitter: @morishitter_;
   github: morishitter;
   qiita: morishitter;
   works-at: 'Increments, inc.';
   specializing-in: CSS;
   }
   

   View Slide

3. About Increments
   We are hiring!
   h"ps:/
   /github.com/increments/job-descrip6ons
   

   View Slide

4. 1994.10.10
   

   View Slide

5. Happy CSS Birthday!
   ! ໌೔Ͱ22ࡀ !
   

   View Slide

6. CSS: It was twenty years ago today — an
   interview with Håkon Wium Lie
   ʮCSS͸500೥ޙ΋ಡΉ͜ͱ͕
   Ͱ͖Δ͸ͣʯ
   h"ps:/
   /dev.opera.com/ar0cles/css-twenty-years-
   hakon/
   

   View Slide

7. ࠷ۙͷCSS
   animation, @keyframes,
   box-sizing, border-radius
   currentColor, color(),
   Custom Properties, @apply,
   containment,
   display: flex, display: grid,
   em, rem, vw, vh, vmin, vmax,
   @font-face,
   object-fit, filter,
   transition, transform,
   will-change, writing-mode, etc...
   

   View Slide

8. CSS ͰදݱͰ͖Δ͜ͱ͸૿͑ͨ
   ͔͠͠ɺࠓ΋ੲ΋มΘ͍ͬͯͳ͍͜ͱ͕͋Δ
   

   View Slide

9. CSS ͸յΕ΍͍͢
   

   View Slide

10. Agenda
    1. CSSͷ໰୊఺
    2. CSSͷઃܭख๏
    3. CSSͷ৽͍͠࢓༷
    4. CSSϞμϯϏϧυϑϩʔ
    

    View Slide

11. CSSͷ໰୊఺
    

    View Slide

12. ͦͷલʹɺCSSͷ"جຊ"ʹ͍ͭͯ
    • CSS (Cascading Style Sheets)
    • ͋Δཁૉʹࢦఆ͞Ε͍ͯΔϓϩύςΟએݴ͕ෳ਺ଘࡏ͢Δͱ
    ͖ɺએݴͷڧ͞ͷؔ܎ΛఆΊͯɺ1ͭͷએݴͷΈΛ༗ޮʹ͢Δ
    ͘͠Έ
    p { color: black; }
    p { color: red; }
    

    View Slide

13. ஋͕ܧঝ͞ΕΔϓϩύςΟ
    • color ΍ font-size ͳͲ
    • ਌ཁૉ͔Β஋͕ܧঝ͞ΕΔ͜ͱͰ৑௕ͳهड़͕ͳ͘ͳΔ
    

    View Slide

14. ηϨΫλͷৄࡉ౓
    • #id > .class, [attr] > Element
    • ࠷ڧͷढจ !important , styleଐੑ
    h1#title {
    font-size: 24px;
    }
    h1 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 1em;
    }
    

    View Slide

15. ͜Ε͚ͩ
    ϦϑΝϨϯεΛݟͳ͕ΒͲΜͲΜॻ͍͍͚ͯΔ
    

    View Slide

16. View Slide

17. CSSͷ໰୊఺ʢٕज़తଆ໘ʣ
    • ؆୯ = ߏจ͕ශऑ
    • ந৅Խɾߏ଄Խ ͕Ͱ͖ͳ͍
    • ϧʔϧηοτͷӨڹൣғ͕Θ͔Βͳ͘ͳΔ
    • શͯͷϧʔϧ͕ άϩʔόϧείʔϓ
    

    View Slide

18. CSSͷ໰୊఺ʢӡ༻తଆ໘ʣ
    • σβΠϯͷมΘΒͳ͍webΞϓϦ͸ͳ͍
    • ৔౰ͨΓతͳमਖ਼͕܁Γฦ͞ΕΔ
    

    View Slide

19. CSSͷ໰୊఺ʢࣾձతଆ໘ʣ
    • CSSᢞΊΒΕ͗͢
    • ϓϩάϥϚʹ͸ܟԕ͞ΕɺσβΠφʔ͕ࡶʹॻ͘
    • ยखؒCSS
    • ίʔυͷైḤͳ؅ཧ
    

    View Slide

20. CSS͸ͨͩwebͷϏδϡΞϧσβΠϯΛ
    දݱͰ͖Ε͹ྑ͍΋ͷͰ͸ͳ͍
    

    View Slide

21. զʑ͸৘ใγεςϜΛ࡞͍ͬͯΔ
    CSS΋
    ιϑτ΢ΣΞͷҰ෦ͱͯ͠อक͞ΕΔ΂͖Ͱ
    ϦϑΝΫλϦϯάͷର৅
    

    View Slide

22. 1. CSSͷ໰୊఺ʢ·ͱΊʣ
    • ٕज़తଆ໘
    • ந৅Խɾߏ଄Խ͕Ͱ͖ͳ͍
    • άϩʔόϧείʔϓ
    • ӡ༻తଆ໘
    • ࣾձతଆ໘
    

    View Slide

23. Agenda
    1. CSSͷ໰୊఺
    2. CSSͷઃܭख๏
    3. CSSͷ৽͍͠࢓༷
    4. CSSϞμϯϏϧυϑϩʔ
    

    View Slide

24. CSSͷઃܭख๏
    1. ྑ͍CSSίʔυΛॻͨ͘Ίʹ
    2. طଘͷCSSઃܭख๏
    3. CSSઃܭͷຊ࣭
    

    View Slide

25. 1. ྑ͍CSSίʔυͱ͸
    • ಡΜͰɺ࠷୹࣌ؒͰཧղͰ͖Δ
    • ୈࡾऀ͕ಡΜͩͱ͖ʹ1ਓ͕ॻ͍͔ͨͷΑ͏ʹ
    • ϝϯςφϯε͢ΔଞͷਓͷͨΊʹɺະདྷͷࣗ෼ͷͨΊʹ
    

    View Slide

26. ίʔσΟϯάن໿
    • Google HTML/CSS Style Guide (Google)
    • idioma8c CSS (Nicolas Gallagher)
    • Code Guide by @mdo (Mark OBo)
    • CSS Guidelines (Harry Roberts)
    ໋໊نଇ΍ϑΥʔϚοτ
    

    View Slide

27. ෆ٢ͳ೏͍
    • ʮCode smells in CSSʯby Harry Roberts
    • h5p:/
    /csswizardry.com/2012/11/code-smells-in-css/
    

    View Slide

28. ελΠϧͷऔΓফ͠
    BAD !
    h2 {
    font-size: 2rem;
    margin-bottom: .5em;
    padding-bottom: .5em;
    border-bottom: 1px solid #ccc;
    }
    .no-boader {
    padding-bottom: 0;
    border-bottom: none;
    }
    

    View Slide

29. ελΠϧͷऔΓফ͠
    GOOD !
    h2 {
    font-size: 2rem;
    margin-bottom: .5em;
    }
    .headline {
    padding-bottom: .5em;
    border-bottom: 1px solid #ccc;
    }
    

    View Slide

30. ϋʔυίʔσΟϯά
    BAD !
    .userIcon {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    }
    

    View Slide

31. ϋʔυίʔσΟϯά
    GOOD !
    .userIcon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    }
    

    View Slide

32. 2. طଘͷCSSઃܭख๏
    ઌਓ͕ͨͪங͍ͨ CSSΛ্ख͘ॻ͘ ํ๏
    • OOCSS
    • BEM
    • ITCSS
    

    View Slide

33. OOCSS
    Object Oriented CSS
    by Nicole Sullivan
    

    View Slide

34. ߏ଄ͱݟͨ໨ͷ෼཭
    • CSSͷϓϩύςΟ͸େ͖͘2ͭͷ༻్ʹ෼ྨͰ͖Δ
    • ߏ଄
    • display, float, width, margin, etc..
    • ݟͨ໨
    • background-color, font-weight, border-radius, etc..
    

    View Slide

35. OK
    Cancel
    .button {
    display: inline-block;
    /* with other properties */
    }
    .button--success {
    color: #fff;
    background-color: #2e6da4;
    }
    .button--danger {
    color: #fff;
    background-color: #d43f3a;
    }
    

    View Slide

36. ίϯςϯπͱίϯςφͷ෼཭
    • CSSͷηϨΫλ͸HTMLͷߏ଄ʹґଘ͢΂͖Ͱ͸ͳ͍
    .list {
    padding: 12px;
    list-style: none;
    }
    .list-item {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    text-decoration: none;
    color: #757575;
    }
    

    View Slide

37. 
    A
    B
    C
    
    or
    
    A
    B
    C
    
    

    View Slide

38. Create a component library
    of reusable "legos"
    

    View Slide

39. BEM
    Block, Element, Modifier
    by Yandex
    

    View Slide

40. BEM
    • ϖʔδΛߏ੒͢Δཁૉͷ෼ׂͱɺͦͷཁૉͷ໊લΛܾΊΔͨΊ
    ͷࢦ਑
    • Block: WebΞϓϦέʔγϣϯΛߏ੒͢Δཁૉ
    • Element: BlockΛߏ੒͢Δཁૉ
    • Modifier: Block΍Elementͷ૷০ͷύλʔϯ΍ঢ়ଶ
    

    View Slide

41. BEMͷϚʔΫΞοϓ
    
    ΞΫςΟϒ
    λϒ
    λϒ
    
    

    View Slide

42. .Tab { /* Block */
    display: flex;
    align-items: center;
    }
    .Tab__item { /* Element */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 calc(100% / 3);
    height: 50px;
    color: #444;
    background-color: #eee;
    }
    .Tab__item--active { /* Modifier */
    color: #fff;
    background-color: #444;
    }
    

    View Slide

43. BEMͷ໋໊نଇ
    • MindBEMding
    • Block__Element
    • Block--Modifier
    • Block__Element--Modifier
    h"p:/
    /csswizardry.com/2013/01/mindbemding-ge;ng-your-head-round-bem-syntax/
    

    View Slide

44. ITCSS
    Inverted Triangle CSS
    by Harry Roberts
    

    View Slide

45. ITCSS
    • ৄࡉ౓Λ͏·͘؅ཧ͠ɺϧʔϧηοτͷӨڹൣғΛ೺Ѳ͠΍͢
    ͘͢Δ
    

    View Slide

46. ৄࡉ౓άϥϑ
    • CSSͷෳࡶ౓ΛධՁ͢Δࢦඪ
    

    View Slide

47. ৄࡉ౓άϥϑ
    • ԣ࣠: CSSϑΝΠϧ಺ͷͦͷϧʔϧηοτ͕ଘࡏ͢ΔҐஔ
    • ॎ࣠: ͦͷϧʔϧηοτͷৄࡉ౓Λࣔͨ͠
    • ৄࡉ౓͕ӈ্͕ΓʹͳΔΑ͏ʹCSSΛॻ͘
    • ҙਤ͠ͳ͍ελΠϧͷ্ॻ͖Λ๷͙
    

    View Slide

48. ITCSSͷελΠϧ෼ׂ
    • Se$ngs: શମͷઃఆ΍ΧϥʔύϨοτ΍ϑΥϯταΠζΛSass
    ͳͲͷม਺Λ࢖ͬͯఆٛ
    • Tools: Mixin ΍ Func4on
    • Generics: ελΠϧͷϦηοτ (e.g. normalize.css)
    • Base: ཁૉηϨΫλΛ࢖ͬͨϧʔϧηοτΛఆٛ
    

    View Slide

49. ITCSSͷελΠϧ෼ׂ
    • Objects: ૷০Λؚ·ͳ͍ϨΠΞ΢τͷύλʔϯ
    • Components: ૷০ΛؚΜͩUIͷ1ཁૉ (Objectsʹ૷০Λ͋ͯΔ
    ͱ)
    • U5li5es: ൚༻Ϋϥε
    Se#ng -> U*li*es ͷॱʹৄࡉ౓͕ߴ͘ͳΔ
    

    View Slide

50. 3. CSSઃܭͷຊ࣭
    ݸਓͷײ૝Ͱ͢
    

    View Slide

51. Q. ʮͲ͏͢Ε͹յΕͳ͍CSS͕ॻ͚Δͷʁʯ
    

    View Slide

52. A. σβΠϯཧղ
    

    View Slide

53. CSSઃܭͷຊ࣭
    • ʮσβΠϯͷҙਤʯ͕Θ͔Ε͹ࣗવͱηϨΫλ໊͕ܾ·Δ
    • σβΠϯͷҙਤΛਖ਼͘͠ཧղͯ͠ॻ͔ΕͨCSS͸ഁ୼͠ͳ͍
    

    View Slide

54. CSSઃܭͷຊ࣭͸ɺ
    ໋໊نଇͰ͸ͳ͘
    σβΠϯཧղͱελΠϧͷ෼ׂཻ౓
    

    View Slide

55. ECSSIST
    Extensible CSS Idealis0c
    Structure Theory
    by morishi*er
    h"ps:/
    /medium.com/@morishi"er/extensible-
    css-idealis8c-structure-theory-36bd892d3a50
    

    View Slide

56. ʮCSSͷઃܭख๏ͳΜ͍ͯΖ͍
    Ζ͋Δ͚Ͳɺࣗ෼ࣗ਎ͷߟ͑
    ΍νʔϜͷ։ൃମ੍ɺσβΠ
    ϯϓϩηεʹ߹Θͤͯௐ੔͠
    ͍ͯ͘΋ͷͩͱࢥ͏ɻʯ
    h"p:/
    /morishi"er.hatenablog.com/entry/
    2016/07/29/204642
    

    View Slide

57. 2. CSSͷઃܭख๏ʢ·ͱΊʣ
    • ྑ͍CSSίʔυΛॻͨ͘Ίʹ
    • ίʔσΟϯάن໿ɺCSSͷෆ٢ͳ೏͍
    • طଘͷCSSઃܭख๏
    • OOCSS, BEM, ITCSS
    • CSSઃܭͷຊ࣭
    • σβΠϯཧղͱελΠϧͷ෼ׂཻ౓
    

    View Slide

58. Agenda
    1. CSSͷ໰୊఺
    2. CSSͷઃܭख๏
    3. CSSͷ৽͍͠࢓༷
    4. CSSϞμϯϏϧυϑϩʔ
    

    View Slide

59. CSSͷ৽͍͠࢓༷
    1. Flexible Box Layout
    2. CSS Custom Proper9es for Cascading Variables
    3. tabatkins / specs
    

    View Slide

60. 1. Flexible Box Layout
    • a.k.a Flexbox
    • ݩʑ͸XULͱ͍͏UIݴޠ͕ϕʔε
    • ॊೈͳϨΠΞ΢τΛՄೳʹ͢ΔͨΊͷ࢓༷
    

    View Slide

61. Flexboxͷϒϥ΢βରԠঢ়گ
    

    View Slide

62. FlexboxͷϞσϧ
    

    View Slide

63. FlexίϯςφͱFlexΞΠςϜ
    
    FlexΞΠςϜ
    FlexΞΠςϜ
    FlexΞΠςϜ
    
    • display: flex Λࢦఆ͢Δͱͦͷཁૉ͸FlexίϯςφʹͳΔ
    • Flexίϯςφͷࢠཁૉ͕FlexΞΠςϜ
    

    View Slide

64. FlexίϯςφͷϓϩύςΟ
    • flex-direction: ϝΠϯ࣠ͷ޲͖
    • flex-wrap: ϝΠϯ࣠ͷऴ఺ʹୡͨ͠ͱ͖ʹંΓฦ͔͢Ͳ͏͔
    • justify-content: ϝΠϯ࣠ʹରͯ͠ͷ੔ྻ
    • align-items: Ϋϩε࣠ʹରͯ͠ͷ੔ྻ
    • etc..
    

    View Slide

65. FlexΞΠςϜͷϓϩύςΟ
    • flex-grow: FlexΞΠςϜͷ৳ͼ۩߹
    • flex-shrink: FlexΞΠςϜͷॖΈ۩߹
    • flex-basis: FlexΞΠςϜͷॳظϝΠϯαΠζΛࢦఆ
    • align-self: FlexΞΠςϜͷΫϩε࣠ʹରͯ͠ͷ੔ྻ
    • etc..
    

    View Slide

66. FlexboxͷϓϩύςΟΛ֮͑Δίπ
    • FlexboxͷϞσϧΛཧղ͢Δ
    • Flexίϯςφ͔FlexΞΠςϜͷϓϩύςΟͳͷ͔Λҙࣝ
    

    View Slide

67. Flexboxͷόά
    • ಛʹIE, Safariʹଟ͍
    • h,ps:/
    /github.com/philipwalton/flexbugs
    • Flexboxͷόά·ͱΊ
    • ※ใࠂ͞Ε͍ͯͳ͍όά΋ଟ͍
    

    View Slide

68. 2. CSS Custom Proper/es for Cascading Variables
    • ҎԼ Custom Proper-es
    • ϓϩύςΟͷ஋Λม਺ͱͯ͠؅ཧ͢Δ͘͠Έ
    • CSSͷʮந৅ԽͰ͖ͳ͍໰୊ʯͷͻͱͭͷղܾࡦ
    

    View Slide

69. Custom Proper,es ϒϥ΢βରԠঢ়گ
    

    View Slide

70. Custom Proper,esͷఆٛͱ࢖༻
    :root {
    --thumbnailSize: 40px;
    --mainColor: #55acee;
    }
    .logo {
    fill: var(--mainColor);
    }
    .thumbnail {
    width: var(--thumbnailSize, 32px);
    height: var(--thumbnailSize, 32px);
    border-radius: 100%;
    }
    

    View Slide

71. Custom Proper,esΛ࢖͏্Ͱͷ஫ҙ఺
    • Custom Proper-es΋ΧεέʔσΟϯάͷର৅
    • var()ؔ਺ͷ࣮ߦͷλΠϛϯά
    

    View Slide

72. Custom Proper,esͷΧεέʔσΟϯά
    
    λΠτϧ
    
    :root { --textColor: red; }
    #title { --textColor: green; }
    h1 { --textColor: blue; }
    h1 {
    color: var(--textColor); /* green */
    }
    

    View Slide

73. var()ؔ਺ͷ࣮ߦͷλΠϛϯά
    
    λΠτϧ
    
    :root { --textColor: red; }
    #title { --textColor: blue; }
    section { color: var(--textColor); }
    h1 {
    color: inherit; /* red */
    }
    var()ؔ਺ͷධՁ͸ܧঝΑΓ΋ઌʹߦΘΕΔ
    

    View Slide

74. 3. tabatkins / specs
    • by Tab Atkins Jr.
    • in CSSWG, Google
    • Flexboxͱ͔CustomProper?esͷΤ
    σΟλ
    • ࣗ෼ͷϦϙδτϦʹCSSͷ࢓༷ΛఏҊ
    

    View Slide

75. 3. tabatkins / specs
    • Nes%ng
    • will-change
    • font-display
    • @apply
    • @extend
    • etc...
    

    View Slide

76. Ͱ΋·ͩ·ͩ࢖͑ͳ͍ΜͰ͠ΐʁ
    

    View Slide

77. ࢖͑·͢ʂ
    ͦ͏ɺPostCSS ͳΒͶɻ
    

    View Slide

78. 3. CSSͷ৽͍͠࢓༷ʢ·ͱΊʣ
    • Flexbox
    • ॊೈͳϨΠΞ΢τͷͨΊͷ࢓༷
    • Custom Proper1es
    • CSSͰม਺Λ࢖͏ͨΊͷػߏ
    • tabatkins / specs
    • GoogleΤϯδχΞͷఏҊ
    

    View Slide

79. Agenda
    1. CSSͷ໰୊఺
    2. CSSͷઃܭख๏
    3. CSSͷ৽͍͠࢓༷
    4. CSSϞμϯϏϧυϑϩʔ
    

    View Slide

80. 4. CSSϞμϯϏϧυϑϩʔ
    • ϓϦϓϩηοαʔͷར༻͕౰ͨΓલͷ࣌୅ʢҟ࿦͸ೝΊΔʣ
    • Sass, Less, Stylus, etc
    • ʮந৅Խɾߏ଄Խ͕Ͱ͖ͳ͍໰୊ʯͷղܾࡦ
    • ࠷దԽ
    • minify, Ϋϩεϒϥ΢βରԠ, ϓϩύςΟͷιʔτ, etc
    • ϦϯλʔͱϑΥʔϚολʔ
    

    View Slide

81. PostCSSͰશ෦Ͱ͖ΔΑʂ
    

    View Slide

82. PostCSS ͱ͸
    • by Andrey Sitnik
    • Transforming styles with JS plugins
    • PostCSSࣗମ͸CSSύʔαʔ
    • ASTΛૢ࡞͢ΔAPIΛఏڙ
    • ASTͷૢ࡞͸શͯϓϥάΠϯ͕୲౰
    

    View Slide

83. PostCSSͷॲཧͷྲྀΕ
    

    View Slide

84. ϓϦϓϩηοαʔͱͯ͠ͷPostCSS
    • ݴޠ֦ு༻ϓϥάΠϯ
    • cssnext, precss, atcss, etc
    

    View Slide

85. cssnext
    ະདྷͷCSSͷߏจΛࠓͷϒϥ΢β͕ղऍͰ͖Δ
    Α͏ʹτϥϯεύΠϧ͢ΔPostCSSϓϥάΠϯू
    h"p:/
    /cssnext.io/
    

    View Slide

86. Custom Proper,es
    input:
    :root { --fontSize-m: 18px; }
    p { font-size: var(--fontSize-m); }
    output:
    p { font-size: 18px; }
    

    View Slide

87. Custom media queries
    input:
    @custom-media --small-viewport (max-width: 600px);
    @media (--small-viewport) {
    /* styles for small viewport */
    }
    output:
    @media (max-width: 600px) {
    /* styles for small viewport */
    }
    

    View Slide

88. Custom selectors
    input:
    @custom-selector :--heading h1, h2, h3;
    article :--heading {
    margin-bottom: 2em;
    }
    output:
    article h1,
    article h2,
    article h3 {
    margin-bottom: 2em;
    }
    

    View Slide

89. @apply
    input:
    :root {
    --truncate: {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    }
    p { @apply --truncate; }
    output:
    p {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    

    View Slide

90. @extend
    input:
    .error { color: red; }
    .serious-error {
    @extend .error;
    }
    output:
    .error,
    .serious-error {
    color: red;
    }
    

    View Slide

91. ϓϦϓϩηοαʔͱͯ͠PostCSSΛ࢖͏ϝϦοτ
    • ඞཁͳػೳ͚ͩΛબ୒Ͱ͖Δ
    • ΧελϚΠζ͕༰қ
    • ύϑΥʔϚϯε
    

    View Slide

92. ඞཁͳػೳ͚ͩΛબ୒
    • ʮSass࢖ͬͯΔ͚Ͳ@importͱม਺͚ͩ͋Ε͹͍͍Θʔʯ
    • ʮmixinͱ͔extend͸؅ཧͰ͖ͳ͍͔Β࢖ͬͯͳ͍ʯ
    • PostCSSͳΒඞཁͳϓϥάΠϯ͚ͩΛ௥ՃͰ͖Δ
    

    View Slide

93. ΧελϚΠζ͕༰қ
    • ։ൃऀ͸PostCSSͷϓϥάΠϯΛ࡞Δ͜ͱͰࣗ༝ʹCSSʹม׵ॲ
    ཧΛՃ͑Δ͜ͱ͕Ͱ͖Δ
    • 1ͭ1ͭͷϓϥάΠϯ͸খ͍͞ͷͰίϯτϦϏϡʔτ΋͠΍͍͢
    • SassʹίϯτϦϏϡʔτͰ͖·͔͢ʁ
    

    View Slide

94. ύϑΥʔϚϯε
    PostCSS: 42 ms
    Rework: 68 ms (1.6 times slower)
    libsass: 77 ms (1.9 times slower)
    Less: 142 ms (3.4 times slower)
    Stylus: 200 ms (4.8 times slower)
    Stylecow: 259 ms (6.2 times slower)
    Ruby Sass: 877 ms (21.0 times slower)
    h"ps:/
    /github.com/postcss/benchmark
    

    View Slide

95. ͦͷଞPostCSSϓϥάΠϯ
    

    View Slide

96. Autoprefixer
    Can I UseͷσʔλΛࢀরͯ͠
    ϕϯμʔϓϦϑΟοΫεΛࣗಈ
    Ͱ෇༩͢Δπʔϧ
    h"ps:/
    /github.com/postcss/autoprefixer
    

    View Slide

97. cssnano
    CSSͷminifyπʔϧ
    h"ps:/
    /github.com/ben-eb/cssnano
    

    View Slide

98. stylelint
    ϞμϯCSSϦϯλʔ
    h"ps:/
    /github.com/stylelint/stylelint
    

    View Slide

99. stylefmt
    stylelintͷϧʔϧΛݩʹCSSΛ
    ϑΥʔϚοτ
    h"ps:/
    /github.com/morishi"er/stylefmt
    

    View Slide

100. PostCSS.parts
     h"p:/
     /postcss.parts
     

     View Slide

101. 4. CSSϞμϯϏϧυϑϩʔʢ·ͱΊʣ
     • PostCSSͱ͸
     • Node.js੡CSSύʔαʔ
     • cssnext
     • ະདྷͷγϯλοΫεΛτϥϯεύΠϧ
     • ଞͷPostCSSϓϥάΠϯ
     • Autoprefixer, cssnano, stylelint, stylefmt, etc..
     

     View Slide

102. Agenda
     1. CSSͷ໰୊఺
     2. CSSͷઃܭख๏
     3. CSSͷ৽͍͠࢓༷
     4. CSSϞμϯϏϧυϑϩʔ
     

     View Slide

103. Thanks :D
     Any ques)ons?
     @morishi(er_
     

     View Slide