$30 off During Our Annual Pro Sale. View Details »

Modern CSS: architecture, future specs and build flow

Modern CSS: architecture, future specs and build flow

at DevFest Tokyo 2016.

Masaaki Morishita

October 09, 2016
Tweet

More Decks by Masaaki Morishita

Other Decks in Technology

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