CSSは死んだのか?

 CSSは死んだのか?

まかないてっく#1杯目

66b5fea05e9370317581701c87e50eae?s=128

8845musign

July 27, 2017
Tweet

Transcript

  1. CSS IS DEAD ? Makanai Tech #1 TeamSpirit ෲےϩʔϥʔͷྗΛ৴͡Ζ

  2. `Cascade and Inheritance CSS Cascading Style Sheet

  3. `Cascade and Inheritance html { color: #00897B } section {

    color: inherit }
  4. `Cascade and Inheritance html { color: #00897B } section {

    color: #00897B } p { color: #00897B }
  5. Cascading

  6. `Modular Approach (Code) BEM https://en.bem.info/

  7. `Modular Approach (Code) CSS in JS https://www.styled-components.com/

  8. `Modular Approach (Code) A block is a logically and functionally

    independent component on a page. https://en.bem.info/methodology/faq/#can-i-use-a-css-reset
  9. `Modular Approach (Code) No Cascading (No Element Selector)

  10. CSS IS DIFFICULT

  11. `VS Cascading

  12. Design “System”

  13. `VS Modular Approach

  14. Independence

  15. `Problems (Modular Approach) A A Discordance #000 #333 Color

  16. `Problems (Modular Approach) Bigbang Class .some-module .some-module—some-modifire .hoge .any-class .module-common

    .some-page-component .common-module .utility .some-common-module .some-module .some-module—some-modifire .hoge .any-class .module-common .some-page-component .common-module .utility .some-common-module .some-module .some-module—some-modifire .hoge .any-class .module-common .some-page-component .common-module .utility .some-common-module and Propperty
  17. `Problems (Modular Approach) separation of concerns <Button /> .btn

  18. `Problems (Modular Approach) separation of concerns <Button /> .btn <div

    /> Oops…
  19. `Why Select Modular Approach. Why?

  20. CSS IS DIFFICULT

  21. `Why Select Modular Approach. Frontend Engineer

  22. `Why Select Modular Approach. Frontend Engineer CSS JS

  23. `Why Select Modular Approach. Romeo and Juliet Frontend Engineer Designer

  24. CSS IS DEAD?

  25. `Architecture Architecture CSS BEM ECSS ITCSS SMACSS

  26. `Architecture Architecture CSS BEM ECSS ITCSS SMACSS Architecture Design HTML

  27. CSS IS DEAD?

  28. ` CSS Inheritance, The Cascade And Global Scope: Your New

    Old Worst Best Friends Article https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new- old-worst-best-friends/
  29. Thank You!