あのモジュールこのコンポーネントそのブロック

 あのモジュールこのコンポーネントそのブロック

CSS設計におけるコンポーネント粒度について

Object Oriented CSS
https://www.slideshare.net/stubbornella/object-oriented-css

Bootstrap - Components
http://getbootstrap.com/components/

BEM
https://en.bem.info/

Atomic Design
http://atomicdesign.bradfrost.com/

Enduring CSS
http://ecss.io/

13fb4600e942b31c69cfeaf4768c36cc?s=128

Takeshi Takatsudo

June 17, 2017
Tweet

Transcript

  1. あのモジュール このコンポーネント そのブロック ߴ௡ށ૖!5BLB[VEP

  2. ͸͡Ίʹ w Ϟδϡʔϧͱ͔ίϯϙʔωϯτͱ͔
 ϒϩοΫͱ͔ݴ͏͡Όͳ͍ w ͦΕͬͯͳΜͰ͔͢Ͳ͏ߟ͑Ε͹Α͍Ͱ͔͢ w )5.- $44తʹ w

    ͱ͍͏ͷΛ࿩͠·͢
  3. ࣗݾ঺հ w ߴ௡ށ૖!5BLB[VEP w גࣜձࣾϐΫηϧάϦου w ϑϩϯτΤϯυΤϯδχΞ w 8FCσβΠφʔͷͨΊͷK2VFSZೖ໳

  4. ίϯϙʔωϯτԽͱ͸ w ͱΓ͋͑ͣɺجຊίϯϙʔωϯτͬͯݺͿ͜ͱʹ͢Δ w ϓϩάϥϜͰ͸औΓཱͯͯಛผͳ֓೦Ͱ͸ͳ͍

  5. $44ʹ͓͚ΔίϯϙʔωϯτԽ w ͳͥඞཁʁ w $44͸શ͕ͯάϩʔόϧ w ࣗ෼ͷॻ͍ͨηϨΫλ͕Ͳ͜ʹӨڹΛٴ΅͔͢Θ͔Βͳ͍ w Ͳ͔͜ʹॻ͔ΕͨηϨΫλ͕ࣗ෼ͷॻ͘)5.-ʹ
 Ͳ͏ӨڹΛ͓Α΅͔͢Θ͔Βͳ͍

    w ͳΜͰ͔஌Βͳ͍͚ͲԶͷॻ͘TQBOʹ͸શ෦NBSHJO͕͍ͭͯΔ w ஍ࠈͩʂ
  6. $44ઃܭʹ͓͚Δ
 ίϯϙʔωϯτԽͬͯͲΜͳͷʁ w ·ͣͦ͏͍͏໰୊৭ʑ͋Δ͔ΒɺͲ͏)5.- $44Λॻ͚ ͹͍͍Ͱ͔͢Ͷ͍ͬͯ͏ͷ͕$44ઃܭͱݺ͹ΕΔ΋ͷ w ͜͏͍͏ߟ͑Ͱॻ͍ͨΒ͍͍Μ͡Όͳ͍Ͱ͔͢Ͷͱ
 ߟ͑ํ΍ίʔυઃܭํ๏Λ·ͱΊͨͷ͕$44ઃܭํ๏࿦ w

    ༗໊ͳ$44ઃܭํ๏࿦Ͱ͋Δ
 00$44 #&.Λ؆୯ʹ঺հ
  7. 00$44
 0CKFDU0SJFOUFE$44

  8. 0$444ͬͯʁ w 0CKFDU0SJFOUFE$44 w ϖʔδ͸Ϩΰͷू·Γͩ w ·ͣ͸Ϩΰʢ.PEVMFʣΛ࡞Ε w ϨΰΛ૊Έ߹ΘͤͯϖʔδΛ࡞Ε w

    ͦ͏͢Ε͹ࣅͨΑ͏ͳ$44ೋ౓ͱॻ͔ͳͯ͘ࡁΉͧ w ͦͨ͠Βແବ͕ແ͘ͳΔͷͰ$44ͷ༰ྔΊͪΌͪ͘Ό΁Δͧ
  9. ϕʔεͱεΩϯ w όϦΤʔγϣϯͷ͋Δ6*ʹ͸ϕʔεͱεΩϯͷ֓೦Λ࢖͑ w ΦϒδΣΫτࢦ޲ϓϩάϥϛϯάͷ
 ܧঝΛώϯτʹͯ͠Δͧ

  10. #PPUTUSBQͷྫ

  11. #&.

  12. #MPDL&MFNFOU

  13. .PEJpFS w ϖʔδ͸#MPDLͷू·Γ w ϒϩοΫ͸&MFNFOUͷू·Γ w มԽͷόϦΤʔγϣϯ͸.PEJpFS

  14. None
  15. None
  16. <section class="column"> <h3 class="column__head">About BEM</h3> <div class="column__body"> <p class="column__p">The quick

    brown...</p> <p class="column__p">The quick brown...</p> </div> </section> .column { ... } .column__head { ... } .column__body { ... } .column__p { ... }
  17. ͜͏ͯ͠$44ઃܭʹ͸ ฏ࿨͕๚Εͨ w ΈΜͳͰίϯϙʔωϯτԽͷํ๏ڞ༗Ͱ͖ͯϋοϐʔͩͶ w ΋͸΍#&.ͱ͔σϑΝΫτελϯμʔυͱ΋ݴ͑Δ΄Ͳ ʹྲྀߦͬͨ͠Ͷ w ͔͠͠

  18. ফ͑ͳ͍೰Έ w ίϯϙʔωϯτͷ໊લ w ίϯϙʔωϯτͷཻ౓ w Զͷߟ͑Δ#MPDL͸͜͏ͳΜ͚ͩͲ
 ͍͋ͭͷߟ͑Δ#MPDL͸͜͏ͳΜͩΑͳʙ

  19. ίϯϙʔωϯτͷ໊લ column? introBlock?

  20. ίϯϙʔωϯτͷཻ౓ w ͜Ε͸&MFNFOUʹ͢Δͷ͔ʁ#MPDLʹ͢Δͷ͔ʁ w ͦͷDPMVNOɺDPMVNOͱQBSBHSBQI͡Όͳ͍ͷʁ

  21. ߟ͑ํͷώϯτ w"UPNJD%FTJHO w&OEVSJOH$44

  22. "UPNJD%FTJHO

  23. ͦΕ͸Կʁ w #SBE'SPTUஶ w ͦ΋ͦ΋·ͣϖʔδΛ࡞͍ͬͯΔͱ͍͏ೝࣝΛվΊΔඞཁ͕͋Δ w σβΠϯγεςϜΛ࡞ΓɺϖʔδΛ࡞Δͱ͍͏ྲྀΕ w σβΠϯγεςϜΛҙࣝ͠ɺӡ༻͢Δ͜ͱͰ৭ʑϋοϐʔʹͳΔ w

    ͳΜͱͯ͠Ͱ΋σβΠϯγεςϜΛ࡞Δ΂͠ w σβΠϯγεςϜ͸ྑ͍ͧσβΠϯγεςϜ͸ྑ͍ͧ w ͱ͍͏Α͏ͳઃܭํ๏࿦ʹ͍ͭͯॻ͔Εͨ΋ͷ
  24. None
  25. None
  26. None
  27. None
  28. "UPNJD%FTJHOͷڭ͑ w ࡉ෦͔Β࢝ΊͯશମΛߟ͑ɺͦͯ͠·ͨࡉ෦Λݟ௚ͤ w ͜Ε͸σβΠϯͷϝϯλϧϞσϧͷ࿩ w ͦ͏΍ͬͯσβΠϯγεςϜΛ࡞Δ w શߦఔͷڞ௨ݴޠͱͳΔίϯϙʔωϯτͷηοτΛ w

    σβΠϯͷҰ؏ੑΛอͯ
  29. Ͳ͏΍ͬͯͦΕΛ࣮ݱ͢Δʁ w ΫϥΠΞϯτΛઆಘͤΑ w ͦ͏͍͏ྲྀΕ͕ϕετͰ͋Δͱ͍͏͜ͱΛೲಘͤ͞Α w ۩ମతʹ͸͜͏͍͏ϦχϡʔΞϧͷఏҊํ๏͕͋Δͧ w ͦ΋ͦ΋ϫʔΫϑϩʔ͕޻ఔ͝ͱʹ
 அઈ͞Εͨ΢Υʔλʔϑϩʔͩͱແཧͩ

    w ͱ͍͏Α͏ͳ࿩͕৭ʑॻ͍ͯ͋Δ
  30. None
  31. None
  32. None
  33. ͜Ε͸$44ઃܭํ๏࿦ʁ w /0ɻϫʔΫϑϩʔ΍ମ੍΋ؚΊͨ޿͍είʔϓͷߟ͑ w $44ઃܭʹ͓͍ͯ·ͰͦΕΛ
 ؏ప͢΂͠ͱ͍͏͜ͱͰ͸ͳ͍ w σβΠϯγεςϜͷॏཁ͞ͱ
 ͦΕΛ࣮ݱ͢ΔͨΊͷํ๏Λղઆͨ͠΋ͷ w

    σβΠϯγεςϜ࣮ݱͷՁ஋͸ߴ͍͕
 ҡ࣋ͱӡ༻͸େมͰ͋Δ͜ͱ΋ॻ͔Ε͍ͯΔ
  34. "UPNJD%FTJHO
 ΛಡΜͰ͜͏ࢥͬͨ w Զ͕ߟ͑Δίϯϙʔωϯτ͸͜Εɺ
 ͓લ͕ߟ͑Δίϯϙʔωϯτ͸͜Ε w ͦͷࠩΛຒΊΔʹ͸ɺ·ͣϫʔΫϑϩʔͱͯͦ͠͏͍͏ί ϯϙʔωϯτΛڞ௨ݴޠͱ͢ΔΑ͏ͳମ੍͕ඞཁ w ͍͘Β)5.-

    $44ͷஈ֊Ͱؤுͬͯ6*Λ੔ཧͨͬͯ͠׬શ ͳίϯϙʔωϯτͷηοτΛ࡞Γ্͛Δͷ͸ແཧͩ w ͳͥͳΒͦΕΑΓલͷஈ֊Ͱͦ͏ߟ͑ΒΕ͍ͯͳ͍͔Β
  35. &OEVSJOH$44 &$44

  36. ͦΕ͸Կʁ w #FO'SBJOஶ w ௕͘ӡ༻Ͱ͖Δ͜ͱʹॏ͖Λ͓͍ͨ$44ઃܭํ๏࿦ w ίϯϙʔωϯτͷந৅ԽΛආ͚Δ w ෼཭͠ɺ͍ͭͰ΋ࣺͯΒΕΔ͜ͱΛॏཁͱߟ͑Δ

  37. ͜͜Ͱݴ͏ந৅Խͱ͸ w ؆୯ʹݴ͏ͱɺ0$444తͳΞϓϩʔνͷ͜ͱ w ͭͷ)5.- $44తίϯϙʔωϯτΛ
 ଟ༷ͳίϯςΩετͷ΋ͱͰ࢖͏Α͏ઃܭ͢Δ͜ͱ

  38. None
  39. None
  40. None
  41. ந৅ԽΛආ͚Δͱ͸ w ࣅͨΑ͏ͳ6*ύʔπ͕ొ৔ͯ͠΋
 ผͷػೳͷதͰ࢖ΘΕΔͷͰ͋Ε͹ͦΕ͸ผ෺ w ಉ͡Α͏ͳݟӫ͑Ͱ΋ͦΕͧΕͷ
 ίϯϙʔωϯτ಺ʹ$44Λॻ͘ʢྫϘλϯʣ w ؆୯ʹݴ͑͹ɺػೳຖͷ·ͱ·ΓͰ
 େ͖ΊʹίϯϙʔωϯτΛ੾Δ

  42. ෼཭ʹॏ͖Λஔ͘ w ͳʹͦΕඇޮ཰͡Όͳ͍ʁ w ͍΍ɺͳΜͰ΋͔ΜͰ΋࢖͍·Θͦ͏ͱ͢Δ͔Βഁ୼͢Δͷͩ w ແݶʹϞσΟϑΝΠΞ͕૿͑ΔͩΖ͏ w Ұ౓ॻ͍ͨ$44͸ೋ౓ͱมߋ͢Δ͜ͱ͕Ͱ͖ͳ͍ͩΖ͏ w

    ಉ͡$44Λίϐϖͨ͠ͱ͜ΖͰH[JQ͢ΓΌେͯ͠༰ྔมΘΒΜ w ػೳ͝ͱ$44͕·ͱ·͍ͬͯͨΒɺͦͷػೳ͕ͳ͘ͳͬͨ࣌ɺ֘౰Օॴͷ ίʔυΛ·Δ͝ͱࣺͯΔ͜ͱ͕Ͱ͖Δ w ٯʹݴ͑͹ɺ͜ͷΑ͏ʹ͠ͳ͚Ε͹$44͸ೋ౓ͱফ͢͜ͱ͕Ͱ͖ͳ͍
  43. None
  44. ໊લۭؒ

  45. w ը૾΍+BWB4DSJQUͳͲͷΞηοτ΋໊લۭؒ͝ͱʹ·ͱΊΔ /* ڞ௨ common modules */ .cmn-Header { ...

    } .cmn-Footer { ... } .cmn-SideAd { ... } /* τοϓϖʔδ topPage modules */ .tp-MainVisual { ... } .tp-Carousel { ... } .tp-NewsList { ... } /* ঎඼ৄࡉ productDetail modules */ .pd-ItemDescription { ... } .pd-ItemMainPhoto { ... } .pd-Carousel { ... } /* γϣοϐϯάΧʔτ shoppingCart modules */ .sc-ItemList { ... } .sc-UserInfo { ... }
  46. w ࣗ෼͸ಉ͡ˍࣅͨݟӫ͑ͷ6*ΛಉҰͷίϯϙʔωϯτͱ͠ ͯ·ͱΊ͋͛Δ͜ͱ͕ৗʹϕετͰ͋Δͱߟ͍͑ͯͨ w ͔ͦ͠͠Ε͸Ұͭͷઃܭͷܗʹա͗ͳ͔ͬͨ w ୭͕ͲͷΑ͏ʹӡ༻͍͔ͯ͘͠ʹΑΓ࠷దͳઃܭ͸ҟͳΔ w ٻΊΔ΋ͷʹΑΓऔΔ΂͖$44ઃܭͷํ๏͸ҟͳͬͨ &$44ΛಡΜͰ͜͏ࢥͬͨ

  47. "UPNJD%FTJHOతΞϓϩʔν ΛऔΓೖΕΔ΂͖͔ʁ w ͦΕ͸࣮ݱՄೳ͔
 ӡ༻͢Δମ੍͸͋Δ͔
 ੍࡞ͷϑϩʔʹཱͪೖΔ͜ͱ͸Մೳ͔ w ͦΕ͸ඞཁ͔
 )5.- $44ͷϨΠϠʔʹ͓͍ͯ΋పఈ͢Δ͔


    εϐʔσΟʔʹಉछͷϖʔδΛల։͢Δඞཁ͕͋Δ͔ w ྫେ͖ͳاۀͷαΠτ
  48. )5.- $44ͷςϯϓϨʔτ ͸͋͘·Ͱதؒ੒Ռ෺ w ޙ޻ఔʹ͓͍ͯ)5.-͸Ͳ͏ѻΘΕΔ͔ w ςϯϓϨʔτΛ࡞ͬͯऴΘΓͰ͸ແ͍ w ྫ&$ͷύοέʔδ w

    ྫ8FCΞϓϦέʔγϣϯ w ྫ$.4
  49. TDPQFEͳ$44 w $44JO+4ɺ$44.PEVMFT w #&.΍&$44ͷίϯϙʔωϯτʹελΠϧΛ
 ด͡ࠐΊΔΞϓϩʔν w &$44ͱઃܭͷࢥ૝͸ࣅ͍ͯΔ
 ໋໊نଇͰ࣮ݱ͢Δ͔πʔϧͰ࣮ݱ͢Δ͔

  50. ࠷ޙʹ w 4PMWFZPVSPXOQSPCMFNT &$44  w $44ઃܭ͸σβΠϯΧϯϓͱ
 ίʔυΛோΊ͍ͯͯ΋ղܾ͠ͳ͍ w શମͷྲྀΕͷதͰ$44ઃܭΛͲ͏͢΂͖͔Λߟ͑Δ

  51. None
  52. 0CKFDU0SJFOUFE$44 IUUQTXXXTMJEFTIBSFOFUTUVCCPSOFMMBPCKFDUPSJFOUFEDTT #PPUTUSBQ$PNQPOFOUT IUUQHFUCPPUTUSBQDPNDPNQPOFOUT #&. IUUQTFOCFNJOGP "UPNJD%FTJHO IUUQBUPNJDEFTJHOCSBEGSPTUDPN &OEVSJOH$44 IUUQFDTTJP