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
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. ͜Ε͚ͩ ϦϑΝϨϯεΛݟͳ͕ΒͲΜͲΜॻ͍͍͚ͯΔ
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_