Modern CSS: architecture, future specs and build flow

Transcript

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

   #Devfest16

2. ࣗݾ঺հ .about-me { name: Masaaki Morishita; twitter: @morishitter_; github: morishitter;

   qiita: morishitter; works-at: 'Increments, inc.'; specializing-in: CSS; }

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

4. 1994.10.10

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

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/

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...

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

9. CSS ͸յΕ΍͍͢

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

11. CSSͷ໰୊఺

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

    p { color: black; } p { color: red; }

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

14. ηϨΫλͷৄࡉ౓ • #id > .class, [attr] > Element • ࠷ڧͷढจ

    !important , styleଐੑ h1#title { font-size: 24px; } h1 { font-size: 20px; font-weight: bold; margin-bottom: 1em; }

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

16. None

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

    • શͯͷϧʔϧ͕ άϩʔόϧείʔϓ

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

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

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

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

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

    • ࣾձతଆ໘

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

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

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

26. ίʔσΟϯάن໿ • Google HTML/CSS Style Guide (Google) • idioma8c CSS

    (Nicolas Gallagher) • Code Guide by @mdo (Mark OBo) • CSS Guidelines (Harry Roberts) ໋໊نଇ΍ϑΥʔϚοτ

27. ෆ٢ͳ೏͍ • ʮCode smells in CSSʯby Harry Roberts • h5p:/

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

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; }

29. ελΠϧͷऔΓফ͠ GOOD ! h2 { font-size: 2rem; margin-bottom: .5em; }

    .headline { padding-bottom: .5em; border-bottom: 1px solid #ccc; }

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

    20px; }

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

    50%; }

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

    ITCSS

33. OOCSS Object Oriented CSS by Nicole Sullivan

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

    etc.. • ݟͨ໨ • background-color, font-weight, border-radius, etc..

35. <button class="button button--success">OK</button> <button class="button button--danger">Cancel</button> .button { display: inline-block;

    /* with other properties */ } .button--success { color: #fff; background-color: #2e6da4; } .button--danger { color: #fff; background-color: #d43f3a; }

36. ίϯςϯπͱίϯςφͷ෼཭ • CSSͷηϨΫλ͸HTMLͷߏ଄ʹґଘ͢΂͖Ͱ͸ͳ͍ .list { padding: 12px; list-style: none; }

    .list-item { display: block; margin-bottom: 8px; font-size: 12px; text-decoration: none; color: #757575; }

37. <ul class="list"> <li class="list-item">A</li> <li class="list-item">B</li> <li class="list-item">C</li> </ul> or

    <div class="list"> <a class="list-item" href="#">A</a> <a class="list-item" href="#">B</a> <a class="list-item" href="#">C</a> </div>

38. Create a component library of reusable "legos"

39. BEM Block, Element, Modifier by Yandex

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

    • Modifier: Block΍Elementͷ૷০ͷύλʔϯ΍ঢ়ଶ

41. BEMͷϚʔΫΞοϓ <ul class="Tab"> <li class="Tab__item Tab__item--active">ΞΫςΟϒ</li> <li class="Tab__item">λϒ</li> <li class="Tab__item">λϒ</li>

    </ul>

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; }

43. BEMͷ໋໊نଇ • MindBEMding • Block__Element • Block--Modifier • Block__Element--Modifier h"p:/

    /csswizardry.com/2013/01/mindbemding-ge;ng-your-head-round-bem-syntax/

44. ITCSS Inverted Triangle CSS by Harry Roberts

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

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

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

    ҙਤ͠ͳ͍ελΠϧͷ্ॻ͖Λ๷͙

48. ITCSSͷελΠϧ෼ׂ • Se$ngs: શମͷઃఆ΍ΧϥʔύϨοτ΍ϑΥϯταΠζΛSass ͳͲͷม਺Λ࢖ͬͯఆٛ • Tools: Mixin ΍ Func4on

    • Generics: ελΠϧͷϦηοτ (e.g. normalize.css) • Base: ཁૉηϨΫλΛ࢖ͬͨϧʔϧηοτΛఆٛ

49. ITCSSͷελΠϧ෼ׂ • Objects: ૷০Λؚ·ͳ͍ϨΠΞ΢τͷύλʔϯ • Components: ૷০ΛؚΜͩUIͷ1ཁૉ (Objectsʹ૷০Λ͋ͯΔ ͱ) •

    U5li5es: ൚༻Ϋϥε Se#ng -> U*li*es ͷॱʹৄࡉ౓͕ߴ͘ͳΔ

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

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

52. A. σβΠϯཧղ

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

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

55. ECSSIST Extensible CSS Idealis0c Structure Theory by morishi*er h"ps:/ /medium.com/@morishi"er/extensible-

    css-idealis8c-structure-theory-36bd892d3a50

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

57. 2. CSSͷઃܭख๏ʢ·ͱΊʣ • ྑ͍CSSίʔυΛॻͨ͘Ίʹ • ίʔσΟϯάن໿ɺCSSͷෆ٢ͳ೏͍ • طଘͷCSSઃܭख๏ • OOCSS,

    BEM, ITCSS • CSSઃܭͷຊ࣭ • σβΠϯཧղͱελΠϧͷ෼ׂཻ౓

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

59. CSSͷ৽͍͠࢓༷ 1. Flexible Box Layout 2. CSS Custom Proper9es for

    Cascading Variables 3. tabatkins / specs

60. 1. Flexible Box Layout • a.k.a Flexbox • ݩʑ͸XULͱ͍͏UIݴޠ͕ϕʔε •

    ॊೈͳϨΠΞ΢τΛՄೳʹ͢ΔͨΊͷ࢓༷

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

62. FlexboxͷϞσϧ

63. FlexίϯςφͱFlexΞΠςϜ <div style="display: flex;"> <div>FlexΞΠςϜ</div> <div>FlexΞΠςϜ</div> <div>FlexΞΠςϜ</div> </div><!-- Flexίϯςφ -->

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

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

    • align-items: Ϋϩε࣠ʹରͯ͠ͷ੔ྻ • etc..

65. FlexΞΠςϜͷϓϩύςΟ • flex-grow: FlexΞΠςϜͷ৳ͼ۩߹ • flex-shrink: FlexΞΠςϜͷॖΈ۩߹ • flex-basis: FlexΞΠςϜͷॳظϝΠϯαΠζΛࢦఆ

    • align-self: FlexΞΠςϜͷΫϩε࣠ʹରͯ͠ͷ੔ྻ • etc..

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

67. Flexboxͷόά • ಛʹIE, Safariʹଟ͍ • h,ps:/ /github.com/philipwalton/flexbugs • Flexboxͷόά·ͱΊ •

    ※ใࠂ͞Ε͍ͯͳ͍όά΋ଟ͍

68. 2. CSS Custom Proper/es for Cascading Variables • ҎԼ Custom

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

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

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%; }

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

72. Custom Proper,esͷΧεέʔσΟϯά <section> <h1 id="title">λΠτϧ</h1> </section> :root { --textColor: red;

    } #title { --textColor: green; } h1 { --textColor: blue; } h1 { color: var(--textColor); /* green */ }

73. var()ؔ਺ͷ࣮ߦͷλΠϛϯά <section> <h1 id="title">λΠτϧ</h1> </section> :root { --textColor: red; }

    #title { --textColor: blue; } section { color: var(--textColor); } h1 { color: inherit; /* red */ } var()ؔ਺ͷධՁ͸ܧঝΑΓ΋ઌʹߦΘΕΔ

74. 3. tabatkins / specs • by Tab Atkins Jr. •

    in CSSWG, Google • Flexboxͱ͔CustomProper?esͷΤ σΟλ • ࣗ෼ͷϦϙδτϦʹCSSͷ࢓༷ΛఏҊ

75. 3. tabatkins / specs • Nes%ng • will-change • font-display

    • @apply • @extend • etc...

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

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

78. 3. CSSͷ৽͍͠࢓༷ʢ·ͱΊʣ • Flexbox • ॊೈͳϨΠΞ΢τͷͨΊͷ࢓༷ • Custom Proper1es •

    CSSͰม਺Λ࢖͏ͨΊͷػߏ • tabatkins / specs • GoogleΤϯδχΞͷఏҊ

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

80. 4. CSSϞμϯϏϧυϑϩʔ • ϓϦϓϩηοαʔͷར༻͕౰ͨΓલͷ࣌୅ʢҟ࿦͸ೝΊΔʣ • Sass, Less, Stylus, etc •

    ʮந৅Խɾߏ଄Խ͕Ͱ͖ͳ͍໰୊ʯͷղܾࡦ • ࠷దԽ • minify, Ϋϩεϒϥ΢βରԠ, ϓϩύςΟͷιʔτ, etc • ϦϯλʔͱϑΥʔϚολʔ

81. PostCSSͰશ෦Ͱ͖ΔΑʂ

82. PostCSS ͱ͸ • by Andrey Sitnik • Transforming styles with

    JS plugins • PostCSSࣗମ͸CSSύʔαʔ • ASTΛૢ࡞͢ΔAPIΛఏڙ • ASTͷૢ࡞͸શͯϓϥάΠϯ͕୲౰

83. PostCSSͷॲཧͷྲྀΕ

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

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

86. Custom Proper,es input: :root { --fontSize-m: 18px; } p {

    font-size: var(--fontSize-m); } output: p { font-size: 18px; }

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 */ }

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; }

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; }

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

    .error; } output: .error, .serious-error { color: red; }

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

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

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

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

95. ͦͷଞPostCSSϓϥάΠϯ

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

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

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

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

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

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

     • ଞͷPostCSSϓϥάΠϯ • Autoprefixer, cssnano, stylelint, stylefmt, etc..

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

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