CSSは死んだのか？

まかないてっく＃１杯目

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!