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

`Cascade and Inheritance CSS Cascading Style Sheet

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

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

Cascading

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

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

`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

`Modular Approach (Code) No Cascading (No Element Selector)

CSS IS DIFFICULT

`VS Cascading

Design “System”

`VS Modular Approach

Independence

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

`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

`Problems (Modular Approach) separation of concerns .btn

`Problems (Modular Approach) separation of concerns .btn Oops…

`Why Select Modular Approach. Why?

CSS IS DIFFICULT

`Why Select Modular Approach. Frontend Engineer

`Why Select Modular Approach. Frontend Engineer CSS JS

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

CSS IS DEAD?

`Architecture Architecture CSS BEM ECSS ITCSS SMACSS

`Architecture Architecture CSS BEM ECSS ITCSS SMACSS Architecture Design HTML

CSS IS DEAD?

` 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/

Thank You!