ビルドプロセスから考えるCSSアンチパターン

HTML5 Conference 2018の発表資料です。

Transcript

1. Ϗϧυϓϩηε͔Βߟ͑Δ CSSΞϯνύλʔϯ HTML5 Conference 2018 גࣜձࣾΧϒΫ ࠓଜݠ࢜ @kimamula
2. CSSͷ࿩Λ͠·͢
3. ϑϩϯτΤϯυΤϯδχΞͱCSSͱࢲ CSSಘҙ੎ CSSۤख੎
4. CSSಘҙ੎ CSSۤख੎ ࢲ ϑϩϯτΤϯυΤϯδχΞͱCSSͱࢲ
5. ͦΜͳࢲͰ͕͢
6. ৭ʑ͋ͬͯɺ CSSͱਅ݋ʹ޲͖߹Θͳ͚Ε͹ ͳΒͳ͍ͱ͖͕͖ͨ…
7. ਺ϲ݄ܦա
8. ؾ͕͍ͭͨ͜ͱ
9. Flexbox, Grid LayoutΛ࢖͑͹ CSS͸ͦΜͳʹͭΒ͘ͳ͍
10. Flexbox, Grid LayoutΛ࢖͑͹ CSS͸ͦΜͳʹͭΒ͘ͳ͍ ͜ͷ࿩͸͠·ͤΜ
11. Ϗϧυϓϩηε͔Βߟ͑Δͱɺ CSSͷઃܭ͕ߟ͑΍͍͢
12. Ϗϧυϓϩηε͔Βߟ͑Δͱɺ CSSͷઃܭ͕ߟ͑΍͍͢ ͜ͷ࿩Λ͠·͢
13. Ϗϧυϓϩηε͔Βߟ͑Δ CSSΞϯνύλʔϯ
14. Ξϯνύλʔϯ1
15. ίϯϙʔωϯτϕʔεͳͷʹ CSS͸άϩʔόϧ
16. ͦ΋ͦ΋CSSͱ޲͖߹͏͜ͱ Λܾҙͨ͠ݩڟݪҼͷҰͭ
17. • ϑϩϯτΤϯυ։ൃ͸ίϯϙʔωϯτϕʔε͕ ओྲྀ • ࠶ར༻ • είʔϓ෼ׂ ίϯϙʔωϯτϕʔε։ൃ
18. ͦΜͳதɺCSS͚ͩάϩʔόϧ άϩʔόϧ ίϯϙʔωϯτ ͱ͔ ಠࣗͷCSSͱ͔
19. άϩʔόϧ ίϯϙʔωϯτ ͱ͔ ಠࣗͷCSSͱ͔ ͦΜͳதɺCSS͚ͩάϩʔόϧ ͜ͷґଘ͸όϯυϥʔ ͔Βݟ͑ͳ͍
20. όϯυϥʔʹΑΔޮ཰తͳ code splitting͕Ͱ͖ͳ͍ • ଟ͔Εগͳ͔Ε࢖ΘΕ͍ͯͳ͍CSS͕όϯυϧ ʹࠞೖ͢Δ • ಛʹϖʔδॳظදࣔͰɺ࠷௿ݶඞཁͳCSS͚ͩ ΛHTMLʹΠϯϥΠϯͰຒΊࠐΉΑ͏ͳߴ଎Խ ࢪࡦͷಋೖ͕೉͘͠ͳΔ • ϖʔδͷද͕ࣔ஗͘ͳΔ
21. άϩʔόϧωʔϜεϖʔε • CSSΛ࣮࣭తʹϩʔΧϧείʔϓԽ͢Δٕज़Λ ࢖͑ͳ͍ • ϑϨʔϜϫʔΫඪ४ • CSS Modules • ͦͷଞCSS in JS • ఻౷తͳCSSͷͭΒΈͱBEMͳͲͷख๏Ͱઓ Θͳ͚Ε͹ͳΒͳ͍
22. ϙʔλϏϦςΟ͕Լ͕Δ • ίϯϙʔωϯτΛϓϩδΣΫτ֎Ͱ࠶ར༻͢ Δ೉қ౓্͕͕Δ • ͦͷίϯϙʔωϯτ͕ґଘ͢ΔελΠϧΛ࠶ ར༻ઌͰ༻ҙͯ͋͛͠ͳ͚Ε͹ͳΒͳ͍
23. ղܾࡦ
24. CSSΛίϯϙʔωϯτʹؚΊΔ άϩʔόϧ ίϯϙʔωϯτ X
25. ϝϦοτ • ίϯϙʔωϯτͱCSSͷґଘؔ܎͕໌֬ʹͳ Γɺcode splitting͕ՄೳʹͳΔ • ίϯϙʔωϯτʹดͨ͡ϩʔΧϧͳωʔϜε ϖʔε͕࢖͑Δ • ϙʔλϏϦςΟ͕޲্͢Δ
26. Ξϯνύλʔϯ2
27. ίʔυ͸DRYɺग़ྗ͸ඇDRY
28. CSS in JSΛ֮͑ͨͯͷࠒͷࢲ ώϟοϋʔʂJSͰclassΛ֦ுͰ͖Δʔ̇ const basicButton = { textAlign: 'center', cursor: 'pointer', fontWeight: 700, // ... }; const redButton = { ...basicButton, backgroundColor: 'red' };
29. Ϗϧυޙͷίʔυͷ͜ͱΛ ߟ͍͑ͯͳ͔ͬͨ
30. ग़ྗ͞ΕΔCSS .basic-button { text-align: center; cursor: pointer; font-weight: 700; // ... } .red-button { text-align: center; cursor: pointer; font-weight: 700; background-color: red; // … }
31. ग़ྗ͞ΕΔCSS .basic-button { text-align: center; cursor: pointer; font-weight: 700; // ... } .red-button { text-align: center; cursor: pointer; font-weight: 700; background-color: red; // … } DRY͡Όͳ͍
32. ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles
33. ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles
34. ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹDRY͡Όͳ͍ʂʂɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Yʉ
35. ͻΐͬͱͯ͠ճආࡦ͕͋Δʁ styled componentsৄ͍͠ํ ڭ͍͑ͯͩ͘͞
36. ίʔυ͕DRYͰ΋ ग़ྗ͕DRYͰͳ͍ͱ͸ݶΒͳ͍ ※SASSͷ@extends΍ɺCSS Modulesͷcomposes͸ग़ྗ΋DRYͰ͢
37. ղܾࡦ
38. ൚༻తͳελΠϧΛෳ਺ͷ ίϯϙʔωϯτͰ࢖͍ճ͍ͨ࣌͠ • ͦͷελΠϧͦͷ΋ͷΛίϯϙʔωϯτʹׅ Γͩ͠ɺίϯϙʔωϯτ୯ҐͰ࢖͍ճ͢ • ίϯϙʔωϯτ୯ҐͰͷ࢖͍ճ͠ͳΒɺಉ͡ Α͏ͳclass͕ॏෳͯ͠ग़ྗ͞ΕΔ͜ͱ͸ͳ͍ -> ΄ͱΜͲελΠϧ͚ͩͷখ͍͞ίϯϙʔωϯ τ͕ͨ͘͞ΜͰ͖Δ
39. ෦෼తʹελΠϧΛม͍͑ͨ࣌ • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css'; function Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.children} </button> ); }
40. ෦෼తʹελΠϧΛม͍͑ͨ࣌ • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css'; function Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.children} </button> ); } ͜͜ʹ΋஫໨
    w ར༻ଆ͔Βʮத਎ʯΛ౉ͤΔ Α͏ʹ͢Δ
    w 8FC$PNQPOFOUT
    7VFKT ͳΒTMPU
    w "OHVMBSͳΒOHDPOUFOU
41. • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css'; function Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.text} </button> ); } ͜Ε͸Α͘ͳ͍ ෦෼తʹελΠϧΛม͍͑ͨ࣌
42. ར༻ଆ͔Βݟͨ৔߹ // ྑ͍ྫ: ॊೈ <Book>Click Me!</Book> <Book><a href="...">Click Me!</a></Book> <Book><i className="icon"></i>Click Me!</Book> // ѱ͍ྫ: ॊೈͰͳ͍ // ଟ༷ͳཁ݅ʹରԠ͠Α͏ͱ͢Δͱɺ // ίϯϙʔωϯτͷ࣮૷͕ͲΜͲΜෳࡶʹ <Book text="Click Me!"></Book> ͜Ε΋Ξϯνύλʔϯ
    ˞$44ࣗମͷ΋ͷͰ͸ͳ͍͕
43. ͭ·Γ
44. ίϯϙʔωϯτϕʔεΛపఈ͢Δ -> ͍͍ίʔυ͕Ϗϧυ͞ΕΔ • CSSΛίϯϙʔωϯτʹؚΊΔ • ελΠϧͷ࠶ར༻ͷ୯ҐΛίϯϙʔωϯτʹ ͢Δ • slotΛ࢖ͬͯॊೈੑΛ֬อ͢Δ
45. ॳΊ͸ෆ҆ͩͬͨ • ओͳݒ೦఺ • ίϯϙʔωϯτ୯ҐͰͷελΠϧͷ࢖͍ճ͠ Ͱ͸ཻ౓͕ߥ͗ͯ͢ɺ݁ہclass୯Ґͷ࢖͍ճ ͠ͷັྗʹ߅͑ͳ͍ͷͰ͸ʁ -> ࠓͷͱ͜Ζᐜ༕
46. Atomic Design?
47. ͏·Έ͕Α͘෼͔͍ͬͯͳ͍ • ͏·͍ͷ͔΋͠Εͳ͍ • ͜ͷઌߦ͖٧·ͬͨΒऔΓೖΕΔ͔΋ • Atoms, Molecules, Organismsͷ۠෼͚͕೉͠ ͍ͱ͍͏࿩ΛΑ͘ฉ͘ -> ࠓͷ΍Γํ͸ɺϏϧυ݁Ռͱ͍͏࣮རϕʔε ͷઃܭͰ࣮֬ʹ͏·͘ɺ͔ͭͦͷ؍఺Ͱઃܭʹ ໎͏͜ͱ͕ࠓͷͱ͜Ζ͋·Γͳ͍
48. Thank you!