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

Transcript

1. 1.

   Ϗϧυϓϩηε͔Βߟ͑Δ CSSΞϯνύλʔϯ HTML5 Conference 2018 גࣜձࣾΧϒΫ ࠓଜݠ࢜ @kimamula

2. 2.

   CSSͷ࿩Λ͠·͢

3. 3.

   ϑϩϯτΤϯυΤϯδχΞͱCSSͱࢲ CSSಘҙ੎ CSSۤख੎

4. 4.

   CSSಘҙ੎ CSSۤख੎ ࢲ ϑϩϯτΤϯυΤϯδχΞͱCSSͱࢲ

5. 5.

   ͦΜͳࢲͰ͕͢

6. 6.

   ৭ʑ͋ͬͯɺ CSSͱਅ݋ʹ޲͖߹Θͳ͚Ε͹ ͳΒͳ͍ͱ͖͕͖ͨ…

7. 7.

   ਺ϲ݄ܦա

8. 8.

   ؾ͕͍ͭͨ͜ͱ

9. 9.

   Flexbox, Grid LayoutΛ࢖͑͹ CSS͸ͦΜͳʹͭΒ͘ͳ͍

10. 10.

    Flexbox, Grid LayoutΛ࢖͑͹ CSS͸ͦΜͳʹͭΒ͘ͳ͍ ͜ͷ࿩͸͠·ͤΜ

11. 11.

    Ϗϧυϓϩηε͔Βߟ͑Δͱɺ CSSͷઃܭ͕ߟ͑΍͍͢

12. 12.

    Ϗϧυϓϩηε͔Βߟ͑Δͱɺ CSSͷઃܭ͕ߟ͑΍͍͢ ͜ͷ࿩Λ͠·͢

13. 13.

    Ϗϧυϓϩηε͔Βߟ͑Δ CSSΞϯνύλʔϯ

14. 14.

    Ξϯνύλʔϯ1

15. 15.

    ίϯϙʔωϯτϕʔεͳͷʹ CSS͸άϩʔόϧ

16. 16.

    ͦ΋ͦ΋CSSͱ޲͖߹͏͜ͱ Λܾҙͨ͠ݩڟݪҼͷҰͭ

17. 17.

    • ϑϩϯτΤϯυ։ൃ͸ίϯϙʔωϯτϕʔε͕ ओྲྀ • ࠶ར༻ • είʔϓ෼ׂ ίϯϙʔωϯτϕʔε։ൃ

18. 18.

    ͦΜͳதɺCSS͚ͩάϩʔόϧ άϩʔόϧ ίϯϙʔωϯτ ͱ͔ ಠࣗͷCSSͱ͔

19. 19.

    άϩʔόϧ ίϯϙʔωϯτ ͱ͔ ಠࣗͷCSSͱ͔ ͦΜͳதɺCSS͚ͩάϩʔόϧ ͜ͷґଘ͸όϯυϥʔ ͔Βݟ͑ͳ͍

20. 20.

    όϯυϥʔʹΑΔޮ཰తͳ code splitting͕Ͱ͖ͳ͍ • ଟ͔Εগͳ͔Ε࢖ΘΕ͍ͯͳ͍CSS͕όϯυϧ ʹࠞೖ͢Δ • ಛʹϖʔδॳظදࣔͰɺ࠷௿ݶඞཁͳCSS͚ͩ ΛHTMLʹΠϯϥΠϯͰຒΊࠐΉΑ͏ͳߴ଎Խ ࢪࡦͷಋೖ͕೉͘͠ͳΔ

    • ϖʔδͷද͕ࣔ஗͘ͳΔ
21. 21.

    άϩʔόϧωʔϜεϖʔε • CSSΛ࣮࣭తʹϩʔΧϧείʔϓԽ͢Δٕज़Λ ࢖͑ͳ͍ • ϑϨʔϜϫʔΫඪ४ • CSS Modules •

    ͦͷଞCSS in JS • ఻౷తͳCSSͷͭΒΈͱBEMͳͲͷख๏Ͱઓ Θͳ͚Ε͹ͳΒͳ͍
22. 22.

    ϙʔλϏϦςΟ͕Լ͕Δ • ίϯϙʔωϯτΛϓϩδΣΫτ֎Ͱ࠶ར༻͢ Δ೉қ౓্͕͕Δ • ͦͷίϯϙʔωϯτ͕ґଘ͢ΔελΠϧΛ࠶ ར༻ઌͰ༻ҙͯ͋͛͠ͳ͚Ε͹ͳΒͳ͍

23. 23.

    ղܾࡦ

24. 24.

    CSSΛίϯϙʔωϯτʹؚΊΔ άϩʔόϧ ίϯϙʔωϯτ X

25. 25.

    ϝϦοτ • ίϯϙʔωϯτͱCSSͷґଘؔ܎͕໌֬ʹͳ Γɺcode splitting͕ՄೳʹͳΔ • ίϯϙʔωϯτʹดͨ͡ϩʔΧϧͳωʔϜε ϖʔε͕࢖͑Δ • ϙʔλϏϦςΟ͕޲্͢Δ

26. 26.

    Ξϯνύλʔϯ2

27. 27.

    ίʔυ͸DRYɺग़ྗ͸ඇDRY

28. 28.

    CSS in JSΛ֮͑ͨͯͷࠒͷࢲ ώϟοϋʔʂJSͰclassΛ֦ுͰ͖Δʔ̇ const basicButton = { textAlign: 'center',

    cursor: 'pointer', fontWeight: 700, // ... }; const redButton = { ...basicButton, backgroundColor: 'red' };
29. 29.

    Ϗϧυޙͷίʔυͷ͜ͱΛ ߟ͍͑ͯͳ͔ͬͨ

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

    ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles

33. 33.

    ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles

34. 34.

    ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹDRY͡Όͳ͍ʂʂɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Yʉ

35. 35.

    ͻΐͬͱͯ͠ճආࡦ͕͋Δʁ styled componentsৄ͍͠ํ ڭ͍͑ͯͩ͘͞

36. 36.

    ίʔυ͕DRYͰ΋ ग़ྗ͕DRYͰͳ͍ͱ͸ݶΒͳ͍ ※SASSͷ@extends΍ɺCSS Modulesͷcomposes͸ग़ྗ΋DRYͰ͢

37. 37.

    ղܾࡦ

38. 38.

    ൚༻తͳελΠϧΛෳ਺ͷ ίϯϙʔωϯτͰ࢖͍ճ͍ͨ࣌͠ • ͦͷελΠϧͦͷ΋ͷΛίϯϙʔωϯτʹׅ Γͩ͠ɺίϯϙʔωϯτ୯ҐͰ࢖͍ճ͢ • ίϯϙʔωϯτ୯ҐͰͷ࢖͍ճ͠ͳΒɺಉ͡ Α͏ͳclass͕ॏෳͯ͠ग़ྗ͞ΕΔ͜ͱ͸ͳ͍ -> ΄ͱΜͲελΠϧ͚ͩͷখ͍͞ίϯϙʔωϯ

    τ͕ͨ͘͞ΜͰ͖Δ
39. 39.

    ෦෼తʹελΠϧΛม͍͑ͨ࣌ • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css';

    function Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.children} </button> ); }
40. 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. 41.

    • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css'; function

    Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.text} </button> ); } ͜Ε͸Α͘ͳ͍ ෦෼తʹελΠϧΛม͍͑ͨ࣌
42. 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. 43.

    ͭ·Γ

44. 44.

    ίϯϙʔωϯτϕʔεΛపఈ͢Δ -> ͍͍ίʔυ͕Ϗϧυ͞ΕΔ • CSSΛίϯϙʔωϯτʹؚΊΔ • ελΠϧͷ࠶ར༻ͷ୯ҐΛίϯϙʔωϯτʹ ͢Δ • slotΛ࢖ͬͯॊೈੑΛ֬อ͢Δ

45. 45.

    ॳΊ͸ෆ҆ͩͬͨ • ओͳݒ೦఺ • ίϯϙʔωϯτ୯ҐͰͷελΠϧͷ࢖͍ճ͠ Ͱ͸ཻ౓͕ߥ͗ͯ͢ɺ݁ہclass୯Ґͷ࢖͍ճ ͠ͷັྗʹ߅͑ͳ͍ͷͰ͸ʁ -> ࠓͷͱ͜Ζᐜ༕

46. 46.

    Atomic Design?

47. 47.

    ͏·Έ͕Α͘෼͔͍ͬͯͳ͍ • ͏·͍ͷ͔΋͠Εͳ͍ • ͜ͷઌߦ͖٧·ͬͨΒऔΓೖΕΔ͔΋ • Atoms, Molecules, Organismsͷ۠෼͚͕೉͠ ͍ͱ͍͏࿩ΛΑ͘ฉ͘

    -> ࠓͷ΍Γํ͸ɺϏϧυ݁Ռͱ͍͏࣮རϕʔε ͷઃܭͰ࣮֬ʹ͏·͘ɺ͔ͭͦͷ؍఺Ͱઃܭʹ ໎͏͜ͱ͕ࠓͷͱ͜Ζ͋·Γͳ͍
48. 48.

    Thank you!