Slide 1
Slide 1 text
Reusable
CSS
THE FUTURE OF
@glenmaddern
Slide 2
Slide 2 text
HELLO
copeNhagen!
♥
Slide 3
Slide 3 text
@glenmaddern
Slide 4
Slide 4 text
@glenmaddern
"
Slide 5
Slide 5 text
@glenmaddern
Slide 6
Slide 6 text
@glenmaddern
front end
C E N T E R
https://frontend.center
Slide 7
Slide 7 text
@glenmaddern
Slide 8
Slide 8 text
@glenmaddern
2015
WHAT MAKES CSS
SO HARD TO MAINTAIN?
Slide 9
Slide 9 text
@glenmaddern
demonic CSS
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
@glenmaddern
✅ COMPLICATED SELECTORS
CSS
✅ OVERRIDE-HEAVY
✅ NO ISOLATION
✅ !IMPORTANT
✅ END OF FILE ONLY
Slide 12
Slide 12 text
@glenmaddern
Slide 13
Slide 13 text
@glenmaddern
https:/
/github.com/css-modules/css-modules
Slide 14
Slide 14 text
@glenmaddern
IDEAS
TECHNIQUES
✏
TECHNOLOGY
Slide 15
Slide 15 text
@glenmaddern
.selector > header > span {}
.foo.bar.baz {}
p {}
❌
.single-really-long-classnames {}
✅
Slide 16
Slide 16 text
@glenmaddern
✏
.Block {}
.Block__Element {}
.Block__Element--modifier
https:/
/bem.info
Slide 17
Slide 17 text
@glenmaddern
.block {}
.element {}
.modifier {}
https:/
/github.com/css-modules/css-modules
Slide 18
Slide 18 text
@glenmaddern
Slide 19
Slide 19 text
@glenmaddern
Slide 20
Slide 20 text
@glenmaddern
2016
WHAT MAKES CSS
SO HARD TO REUSE?
Slide 21
Slide 21 text
@glenmaddern
import something from 'somewhere'
something.leftPad()
Slide 22
Slide 22 text
@glenmaddern
THE HUMAN BRAIN IS A
(IN)CONSISTENCY-DETECTING
MACHINE
Slide 23
Slide 23 text
@glenmaddern
http://semantic-ui.com
Slide 24
Slide 24 text
@glenmaddern
http://semantic-ui.com
Slide 25
Slide 25 text
@glenmaddern
http://semantic-ui.com
Slide 26
Slide 26 text
@glenmaddern
http://www.novolume.co.uk/blog/all-websites-look-the-same/
Slide 27
Slide 27 text
@glenmaddern
SETTINGS.SCSS
Slide 28
Slide 28 text
@glenmaddern
https://en.wikipedia.org/wiki/Margaret_Hamilton_(scientist)
Slide 29
Slide 29 text
@glenmaddern
http://semantic-ui.com
Slide 30
Slide 30 text
@glenmaddern
IDEAS
TECHNIQUES
✏
TECHNOLOGY
Slide 31
Slide 31 text
@glenmaddern
css
v
ari
able
s
Slide 32
Slide 32 text
@glenmaddern
CSS CUSTOM PROPERTIES
CSS VARIABLES
=
Slide 33
Slide 33 text
@glenmaddern
http://caniuse.com/#feat=css-variables
Slide 34
Slide 34 text
@glenmaddern
Slide 35
Slide 35 text
@glenmaddern
re
sponsive
component
s
Slide 36
Slide 36 text
@glenmaddern
DEATH TO PIXEL PERFECTION
Slide 37
Slide 37 text
@glenmaddern
YOUR COMPONENTS SHOULD
DEMAND LESS
& RESPOND MORE
Slide 38
Slide 38 text
@glenmaddern
A COMPONENT SHOULD
RESPOND TO ITS ENVIRONMENT
• •
RATHER THAN THE ENVIRONMENT
OVERRIDING THE COMPONENT
Slide 39
Slide 39 text
@glenmaddern
LAYOUT COMPONENTS
✏
Slide 40
Slide 40 text
@glenmaddern
PADDING
MARGIN
SIZE
Slide 41
Slide 41 text
@glenmaddern
.component {
width: 50%;
margin-top: 2rem;
flex-grow: 1;
}
❌
Slide 42
Slide 42 text
@glenmaddern
.parent {
display: flex;
padding: 1rem;
}
.parent > * {
flex-grow: 1;
}
ONE
ONE TWO
ONE TWO THREE
Slide 43
Slide 43 text
@glenmaddern
.parent {
display: flex;
padding: 1rem;
}
.parent > * {
flex-grow: 1;
}
.parent > * + * {
margin-left: 1rem;
}
ONE
ONE TWO
ONE TWO THREE
Slide 44
Slide 44 text
@glenmaddern
.parent {
display: flex;
padding: 1rem;
}
.parent > * {
flex-grow: 1;
}
.parent > * + * {
margin-left: 1rem;
}
.parent > :first-child {
flex: 0 0 50%;
}
ONE TWO
ONE TWO THREE
ONE TWO THREE FOUR
Slide 45
Slide 45 text
@glenmaddern
CONTEXTUAL COMPONENTS
✏
Slide 46
Slide 46 text
@glenmaddern
DEMO: CURRENTCOLOR
Slide 47
Slide 47 text
@glenmaddern
https://www.youtube.com/watch?v=jPOBVaomzLE
Slide 48
Slide 48 text
@glenmaddern
.component {
--size: 2rem;
width: calc(2 * var(--size));
height: var(--size);
}
.component
Slide 49
Slide 49 text
@glenmaddern
.component {
--size: var(--spacing, 2rem);
width: calc(2 * var(--size));
height: var(--size);
}
.component
.container
.component
.container {
--spacing: 1rem;
}
Slide 50
Slide 50 text
@glenmaddern
.component {
--size: var(--spacing, 2rem);
width: calc(2 * var(--size));
height: var(--size);
}
.component .component.large
.large {
--spacing: 4rem;
/* or */
--size: 4rem;
}
Slide 51
Slide 51 text
@glenmaddern
.component {
background: var(--bg, black);
color: var(--fg, white);
}
Slide 52
Slide 52 text
@glenmaddern
.component {
background: var(--bg, black);
color: var(--fg, white);
}
(bg, fg) =>
Slide 53
Slide 53 text
@glenmaddern
DEMO: INVERTED BUTTON
Slide 54
Slide 54 text
@glenmaddern
INHERITANCE
THE CASCADE
vs
Slide 55
Slide 55 text
@glenmaddern
NAMING MISMATCHES?
Slide 56
Slide 56 text
@glenmaddern
.container
.container {
--grid-size: 1rem;
}
.component
.component
.component {
--size: var(--spacing, 2rem);
width: calc(2 * var(--size));
height: var(--size);
}
Slide 57
Slide 57 text
@glenmaddern
.component
.container
.component.fix
.container {
--grid-size: 1rem;
}
.fix {
--spacing: var(--grid-size);
}
.component {
--size: var(--spacing, 2rem);
width: calc(2 * var(--size));
height: var(--size);
}
Slide 58
Slide 58 text
@glenmaddern
EXPLICIT COMPONENTS
✏
Slide 59
Slide 59 text
@glenmaddern
http://semantic-ui.com/elements/button.html
Slide 60
Slide 60 text
@glenmaddern
http://jxnblk.com/rebass/#Button
Slide 61
Slide 61 text
@glenmaddern
DEMO: DOCUMENTATION
Slide 62
Slide 62 text
@glenmaddern
OPEN COMPONENTS
✏
Slide 63
Slide 63 text
@glenmaddern
import styles from './MediaObject.css'
const MediaObject = ({ title, image, text }) => (
)
{ title }
{ text }
Slide 64
Slide 64 text
@glenmaddern
import styles from './MediaObject.css'
const MediaObject = ({ title, image, text, theme=styles })=>(
)
https://github.com/css-modules/css-modules/issues/147
{ title }
{ text }
Slide 65
Slide 65 text
@glenmaddern
DEMO: INTERNAL STRUCTURE DOCS
Slide 66
Slide 66 text
@glenmaddern
re
sponsive
component
s
Slide 67
Slide 67 text
@glenmaddern
✏ KEEP LAYOUT SEPARATE
✏ RESPOND TO CONTEXT
✏ DOCUMENT ASSUMPTIONS
✏ OPEN FOR MODIFICATION
Slide 68
Slide 68 text
@glenmaddern
t
hank you!
@glenmaddern