Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kenji Imamula
November 25, 2018

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

HTML5 Conference 2018の発表資料です。

Kenji Imamula

November 25, 2018
Tweet

More Decks by Kenji Imamula

Other Decks in Technology

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!