Slide 1
Slide 1 text
CSS
IS
DEAD ?
Makanai Tech #1
TeamSpirit ෲےϩʔϥʔͷྗΛ৴͡Ζ
Slide 2
Slide 2 text
`Cascade and Inheritance
CSS
Cascading
Style
Sheet
Slide 3
Slide 3 text
`Cascade and Inheritance
html { color: #00897B }
section { color: inherit }
Slide 4
Slide 4 text
`Cascade and Inheritance
html { color: #00897B }
section { color: #00897B }
p { color: #00897B }
Slide 5
Slide 5 text
Cascading
Slide 6
Slide 6 text
`Modular Approach (Code)
BEM
https://en.bem.info/
Slide 7
Slide 7 text
`Modular Approach (Code)
CSS in JS
https://www.styled-components.com/
Slide 8
Slide 8 text
`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
Slide 9
Slide 9 text
`Modular Approach (Code)
No Cascading
(No Element Selector)
Slide 10
Slide 10 text
CSS IS DIFFICULT
Slide 11
Slide 11 text
`VS
Cascading
Slide 12
Slide 12 text
Design “System”
Slide 13
Slide 13 text
`VS
Modular Approach
Slide 14
Slide 14 text
Independence
Slide 15
Slide 15 text
`Problems (Modular Approach)
A A
Discordance
#000 #333
Color
Slide 16
Slide 16 text
`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
Slide 17
Slide 17 text
`Problems (Modular Approach)
separation of
concerns
.btn
Slide 18
Slide 18 text
`Problems (Modular Approach)
separation of
concerns
.btn
Oops…
Slide 19
Slide 19 text
`Why Select Modular Approach.
Why?
Slide 20
Slide 20 text
CSS IS DIFFICULT
Slide 21
Slide 21 text
`Why Select Modular Approach.
Frontend Engineer
Slide 22
Slide 22 text
`Why Select Modular Approach.
Frontend Engineer
CSS
JS
Slide 23
Slide 23 text
`Why Select Modular Approach.
Romeo and Juliet
Frontend Engineer Designer
Slide 24
Slide 24 text
CSS IS DEAD?
Slide 25
Slide 25 text
`Architecture
Architecture
CSS
BEM ECSS
ITCSS
SMACSS
Slide 26
Slide 26 text
`Architecture
Architecture
CSS
BEM
ECSS
ITCSS
SMACSS
Architecture
Design
HTML
Slide 27
Slide 27 text
CSS IS DEAD?
Slide 28
Slide 28 text
`
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/
Slide 29
Slide 29 text
Thank You!