Slide 17
Slide 17 text
styles.css
.bg-black {
background: black;
}
.padding-s {
padding: 10px;
}
.flex {
display: flex;
}
.border-0 {
border: 0;
}
header.template
![]()
Slide 18
Slide 18 text
styles.css
.bg-black {
background: black;
}
.padding-s {
padding: 10px;
}
.flex {
display: flex;
}
.border-0 {
border: 0;
}
.grid {
display: grid;
}
.flex-col {
flex-direction: column;
}
header.template
![]()
footer.template
Slide 19
Slide 19 text
styles.css
.bg-black {
background: black;
}
.padding-s {
padding: 10px;
}
.flex {
display: flex;
}
.border-0 {
border: 0;
}
.grid {
display: grid;
}
.flex-col {
flex-direction: column;
}
header.template
![]()
footer.template
Slide 26
Slide 26 text
header.js
![]()
Slide 27
Slide 27 text
header.js
![]()
footer.js
Slide 28
Slide 28 text
header.js
![]()
footer.js
Slide 29
Slide 29 text
header.js
![]()
footer.js
output HTML
// header
![]()
// footer
output CSS
.a { background: black }
.b { padding: 10px }
.c { display: flex }
.d { border: 0 }
.e { display: grid }
.f { flex-direction: column }
Slide 30
Slide 30 text
header.js
![]()
footer.js
😱 CSS in JS!
Slide 32
Slide 32 text
not so inline
const root = {
...
}
const logo = {
...
}
![]()
Slide 33
Slide 33 text
not so inline
const root = {
...
}
const logo = {
...
}
![]()
import from another file
import {root, logo} from './header.css.js'
![]()
Slide 34
Slide 34 text
not so inline
const root = {
...
}
const logo = {
...
}
![]()
import from another file
import {root, logo} from './header.css.js'
![]()
(with enough Webpack tomfoolery)
Slide 35
Slide 35 text
not so inline
const root = {
...
}
const logo = {
...
}
![]()
import from another file
import {root, logo} from './header.css.js'
![]()
(with enough Webpack tomfoolery)
Styled Components
const Root = styled.div`
background: black;
padding: 10px;
display: flex;
`
const Logo = styled.img`
border: 0;
`
Slide 41
Slide 41 text
.a{background:black}.b{padding:10px}.c{display:flex}.d{border:0}
![]()
just inline the initial render's
CSS in