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Λ࣮࣭తʹϩʔΧϧείʔϓԽ͢Δٕज़Λ ࢖͑ͳ͍ • ϑϨʔϜϫʔΫඪ४ • CSS Modules •

    ͦͷଞCSS in JS • ఻౷తͳCSSͷͭΒΈͱBEMͳͲͷख๏Ͱઓ Θͳ͚Ε͹ͳΒͳ͍
  2. CSS in JSΛ֮͑ͨͯͷࠒͷࢲ ώϟοϋʔʂJSͰclassΛ֦ுͰ͖Δʔ̇ const basicButton = { textAlign: 'center',

    cursor: 'pointer', fontWeight: 700, // ... }; const redButton = { ...basicButton, backgroundColor: 'red' };
  3. ग़ྗ͞ΕΔCSS .basic-button { text-align: center; cursor: pointer; font-weight: 700; //

    ... } .red-button { text-align: center; cursor: pointer; font-weight: 700; background-color: red; // … }
  4. ग़ྗ͞ΕΔ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͡Όͳ͍
  5. ෦෼తʹελΠϧΛม͍͑ͨ࣌ • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css';

    function Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.children} </button> ); }
  6. ෦෼తʹελΠϧΛม͍͑ͨ࣌ • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ 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
  7. • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css'; function

    Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.text} </button> ); } ͜Ε͸Α͘ͳ͍ ෦෼తʹελΠϧΛม͍͑ͨ࣌
  8. ར༻ଆ͔Βݟͨ৔߹ // ྑ͍ྫ: ॊೈ <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ࣗମͷ΋ͷͰ͸ͳ͍͕
  9. ͏·Έ͕Α͘෼͔͍ͬͯͳ͍ • ͏·͍ͷ͔΋͠Εͳ͍ • ͜ͷઌߦ͖٧·ͬͨΒऔΓೖΕΔ͔΋ • Atoms, Molecules, Organismsͷ۠෼͚͕೉͠ ͍ͱ͍͏࿩ΛΑ͘ฉ͘

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