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

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

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. 8.

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

    ͦ͏͢Ε͹ࣅͨΑ͏ͳ$44ೋ౓ͱॻ͔ͳͯ͘ࡁΉͧ w ͦͨ͠Βແବ͕ແ͘ͳΔͷͰ$44ͷ༰ྔΊͪΌͪ͘Ό΁Δͧ
  2. 11.

    #&.

  3. 14.
  4. 15.
  5. 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 { ... }
  6. 23.

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

    ͳΜͱͯ͠Ͱ΋σβΠϯγεςϜΛ࡞Δ΂͠ w σβΠϯγεςϜ͸ྑ͍ͧσβΠϯγεςϜ͸ྑ͍ͧ w ͱ͍͏Α͏ͳઃܭํ๏࿦ʹ͍ͭͯॻ͔Εͨ΋ͷ
  7. 24.
  8. 25.
  9. 26.
  10. 27.
  11. 30.
  12. 31.
  13. 32.
  14. 34.

    "UPNJD%FTJHO
 ΛಡΜͰ͜͏ࢥͬͨ w Զ͕ߟ͑Δίϯϙʔωϯτ͸͜Εɺ
 ͓લ͕ߟ͑Δίϯϙʔωϯτ͸͜Ε w ͦͷࠩΛຒΊΔʹ͸ɺ·ͣϫʔΫϑϩʔͱͯͦ͠͏͍͏ί ϯϙʔωϯτΛڞ௨ݴޠͱ͢ΔΑ͏ͳମ੍͕ඞཁ w ͍͘Β)5.-

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

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

    ಉ͡$44Λίϐϖͨ͠ͱ͜ΖͰH[JQ͢ΓΌେͯ͠༰ྔมΘΒΜ w ػೳ͝ͱ$44͕·ͱ·͍ͬͯͨΒɺͦͷػೳ͕ͳ͘ͳͬͨ࣌ɺ֘౰Օॴͷ ίʔυΛ·Δ͝ͱࣺͯΔ͜ͱ͕Ͱ͖Δ w ٯʹݴ͑͹ɺ͜ͷΑ͏ʹ͠ͳ͚Ε͹$44͸ೋ౓ͱফ͢͜ͱ͕Ͱ͖ͳ͍
  19. 43.
  20. 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 { ... }
  21. 51.